Number Field

A number field allows a user to enter a number value with a keyboard or increment/decrement with step buttons.

<NumberField className="max-w-xs" defaultValue={1}>
  <Label>Quantity</Label>
  <Group>
    <NumberFieldDecrement />
    <Input />
    <NumberFieldIncrement />
  </Group>
</NumberField>

Installation

npx shadcn@latest add @dotui/number-field

Usage

Use NumberField to allow users to enter a numeric value with keyboard or increment/decrement buttons.

import { NumberField } from '@/components/ui/number-field'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/field'
<NumberField>
  <Label>Quantity</Label>
  <Input />
</NumberField>

Anatomy

Wrap the Input in a NumberFieldGroup alongside NumberFieldDecrement and NumberFieldIncrement to expose the stepper buttons. Add Label and FieldError for labelling and validation.

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldDecrement,
  NumberFieldIncrement,
} from '@/components/ui/number-field'
import { Input } from '@/components/ui/input'
import { Label, FieldError } from '@/components/ui/field'
;<NumberField>
  <Label />
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <Input />
    <NumberFieldIncrement />
  </NumberFieldGroup>
  <FieldError />
</NumberField>

Value

The value is a number. Use defaultValue for uncontrolled state, or value with onChange to control it — onChange receives the new number.

const [value, setValue] = React.useState(69)

<NumberField value={value} onChange={setValue}>
  <Input />
</NumberField>

Format options

Pass formatOptions (an Intl.NumberFormat options object) to format the value as a decimal, percent, currency, or unit.

<NumberField formatOptions={{ style: 'currency', currency: 'EUR' }}>
  <Input />
</NumberField>

Min, max, and step

Use minValue and maxValue to constrain the range, and step to set the increment applied by the stepper buttons.

<NumberField minValue={0} maxValue={100} step={5}>
  <Input />
</NumberField>

Validation

Mark the field with isRequired, drive the invalid state with isInvalid, and render the message with FieldError.

<NumberField isRequired isInvalid>
  <Label>Width</Label>
  <Input />
  <FieldError>Please fill out this field.</FieldError>
</NumberField>

Examples

Basic

With Input Group

Format Options

API Reference

A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.

PropType
ReactNode | function
"snap" | "validate"
string
string
boolean
boolean
boolean
number
number
function
NumberFormatOptions

Last updated on 7/9/2026