---
title: Number Field
description: "A numeric input with increment and decrement buttons."
---

```tsx
import { Label } from '@/components/ui/label';
import { NumberField, NumberFieldGroup } from '@/components/ui/number-field';

export default function NumberFieldDemo() {
  return (
    <NumberField defaultValue={5} min={0} max={100}>
      <Label>
        Quantity
        <NumberFieldGroup />
      </Label>
    </NumberField>
  );
}
```

## Install

```bash
npx shadcn@latest add @madeui/number-field
```

## Usage

```tsx
import { NumberField, NumberFieldGroup } from '@/components/ui/number-field';
```

## Composition

```tsx
<NumberField defaultValue={5} min={0} max={100}>
  <NumberFieldGroup />
</NumberField>
```

`NumberFieldGroup` renders decrement / input / increment by default; pass children to compose them yourself (`NumberFieldDecrement`, `NumberFieldInput`, `NumberFieldIncrement`).

## Min, max, and step

```tsx
import { Label } from '@/components/ui/label';
import { NumberField, NumberFieldGroup } from '@/components/ui/number-field';

export default function NumberFieldMinMaxStep() {
  return (
    <NumberField defaultValue={20} min={0} max={100} step={5}>
      <Label>
        Volume
        <NumberFieldGroup />
      </Label>
    </NumberField>
  );
}
```

## Formatted

Pass `format` (`Intl.NumberFormatOptions`) to display the value as currency, a percentage, or any other `Intl.NumberFormat` style.

```tsx
import { Label } from '@/components/ui/label';
import { NumberField, NumberFieldGroup } from '@/components/ui/number-field';

export default function NumberFieldFormatted() {
  return (
    <NumberField
      defaultValue={49.99}
      min={0}
      step={1}
      format={{ style: 'currency', currency: 'USD' }}
    >
      <Label>
        Price
        <NumberFieldGroup />
      </Label>
    </NumberField>
  );
}
```

## API reference

Built on [Base UI Number Field](https://base-ui.com/react/components/number-field). All props are forwarded to the Base UI `Root` (`value`, `min`, `max`, `step`, `format`, `snapOnStep`, …); see the [Base UI Number Field API reference](https://base-ui.com/react/components/number-field#api-reference). `NumberFieldScrubArea` / `NumberFieldScrubAreaCursor` are re-exported unstyled for pointer-scrubbing labels. Every part accepts a `style` prop (`StyleXStyles`, merged last).