A number field allows a user to enter a number value with a keyboard or increment/decrement with step buttons.
<NumberField defaultValue={1024}>
<Label>Width</Label>
<Group>
<Button slot="decrement" />
<Input />
<Button slot="increment" />
</Group>
</NumberField>pnpm dlx shadcn@latest add @dotui/number-fieldUse 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>Use the controls below to experiment with different number field props and see the live preview and code update.
A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(NumberField) defaultValue={1}>
<Dynamic(Label)>Quantity</Dynamic(Label)>
<Dynamic(Input) />
</Dynamic(NumberField)>