Number Field

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

On this page

Quantity

Props

label

isDisabled

isReadOnly

isInvalid

<NumberField defaultValue={1}>
  <Label>Quantity</Label>
  <Group>
    <NumberFieldDecrement />
    <Input />
    <NumberFieldIncrement />
  </Group>
</NumberField>

Installation

npm

pnpm

yarn

bun

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>

Examples

Width

Enter the desired width.

Width

Please fill out this field.

Decimal

Percentage

Currency

Unit

Width

Enter the desired width.

Width

mirrored number: 69

API Reference

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

Prop	Type	Default
	`ReactNode \| function`	`—`
	`"snap" \| "validate"`	`'snap'`
	`string`	`—`
	`string`	`—`
	`boolean`	`—`
	`boolean`	`—`
	`boolean`	`—`

	`number`	`—`
	`number`	`—`
	`function`	`—`
	`NumberFormatOptions`	`—`

Last updated on 6/16/2026