# Number input (UI SDK): Currency, percent and units

> `format` takes `Intl.NumberFormat` options. People can type in the same format, and a percent is a fraction, so 15% is 0.15. The `variant="stacked"` group puts small chevrons at the end.

Canonical: https://hextaui.com/docs/ui-sdk-number-input/examples/format

Component docs: https://hextaui.com/docs/ui-sdk-number-input

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/ui-sdk-number-input-format.json
```

This adds `components/examples/ui-sdk-number-input/format.tsx` with the Number input component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/ui-sdk-number-input/format.tsx"
import { Label } from "@/components/ui/label"
import {
  NumberInput,
  NumberInputControl,
  NumberInputDecrement,
  NumberInputGroup,
  NumberInputIncrement,
  NumberInputStepper,
} from "@/components/ui/ui-sdk-number-input"

const fields = [
  {
    id: "price",
    label: "Price",
    defaultValue: 19.99,
    step: 0.01,
    format: { style: "currency", currency: "USD" },
  },
  {
    id: "discount",
    label: "Discount",
    defaultValue: 0.15,
    step: 0.01,
    format: { style: "percent" },
  },
  {
    id: "weight",
    label: "Weight",
    defaultValue: 2.5,
    step: 0.1,
    format: { style: "unit", unit: "kilogram" },
  },
] satisfies {
  id: string
  label: string
  defaultValue: number
  step: number
  format: Intl.NumberFormatOptions
}[]

function UiSdkNumberInputFormat() {
  return (
    <div className="flex w-full max-w-44 flex-col gap-4">
      {fields.map(({ id, label, ...options }) => (
        <div key={id} className="flex flex-col gap-2">
          <Label htmlFor={id}>{label}</Label>
          <NumberInput {...options} min={0} locale="en-US">
            <NumberInputGroup variant="stacked">
              <NumberInputControl id={id} />
              <NumberInputStepper>
                <NumberInputIncrement />
                <NumberInputDecrement />
              </NumberInputStepper>
            </NumberInputGroup>
          </NumberInput>
        </div>
      ))}
    </div>
  )
}

export { UiSdkNumberInputFormat }
```

## Props in this example

### NumberInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `min` | `number` | – |  |
| `locale` | `string` | – | Defaults to the page’s language. |

### NumberInputGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"split" \| "stacked" \| "plain"` | `"split"` | Buttons on both sides, chevrons stacked at the end, or no buttons, for a scrub handle. |

### NumberInputControl

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | – |  |

## More Number input examples

- [Min and max](https://hextaui.com/docs/ui-sdk-number-input/examples/min-max)
- [Step](https://hextaui.com/docs/ui-sdk-number-input/examples/step)
- [Locale](https://hextaui.com/docs/ui-sdk-number-input/examples/locale)
- [Scrub](https://hextaui.com/docs/ui-sdk-number-input/examples/scrub)
- [Mouse wheel](https://hextaui.com/docs/ui-sdk-number-input/examples/wheel)
- [Controlled](https://hextaui.com/docs/ui-sdk-number-input/examples/controlled)
- [Form](https://hextaui.com/docs/ui-sdk-number-input/examples/form)
- [Invalid](https://hextaui.com/docs/ui-sdk-number-input/examples/invalid)
- [Disabled](https://hextaui.com/docs/ui-sdk-number-input/examples/disabled)
- [Read-only](https://hextaui.com/docs/ui-sdk-number-input/examples/read-only)
- [Right to left](https://hextaui.com/docs/ui-sdk-number-input/examples/rtl)