Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

Installation


pnpm dlx shadcn@latest add @lumi-ui/number-field

import { NumberField } from "@/components/ui/number-field"

<NumberField />

Anatomy

 <NumberField>
   <NumberFieldScrubArea />
 </NumberField>

With Scrub Area

Warning

Form controls must have an accessible name. Prefer using <Field> to provide a visible text label and description, or use the aria-label attribute as an alternative.

Integration with Form

See Form Integration for more information.