Number Field

A numeric input with increment and decrement buttons.

Quantity

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 @madeui/cli add 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

Volume

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.

Price

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>
  );
}

Built on Base UI 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. NumberFieldScrubArea / NumberFieldScrubAreaCursor are re-exported unstyled for pointer-scrubbing labels. Every part accepts a style prop (StyleXStyles, merged last).