Number Field

<NumberField defaultValue={1024}>
  <Label>Width</Label>
  <Group>
    <Button slot="decrement" />
    <Input />
    <Button slot="increment" />
  </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>

Playground

Use the controls below to experiment with different number field props and see the live preview and code update.

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

API Reference