Number Field

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

Quantity

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`	`—`
	`DOMRenderFunction<"div", NumberFieldRenderProps>`	`—`

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

Last updated on 6/4/2026