Primitive · CLI
Number Field
Soft-rect stepper number field with careful scrub feedback on Base UI.
Preview
npx shadcn@latest add @atroui/number-fieldQuantity
Value · 4
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/number-fieldSource lands in your repo. Installation · Registry
Usage
Use inside Field for labels and errors. ScrubArea is optional — keep scrub feedback quiet; steppers own the press micro-motion.
tsx
import {
NumberField,
NumberFieldDecrement,
NumberFieldGroup,
NumberFieldIncrement,
NumberFieldInput,
NumberFieldScrubArea,
} from "@/components/ui/number-field"
<NumberField defaultValue={4} min={1} max={12}>
<NumberFieldScrubArea>Quantity</NumberFieldScrubArea>
<NumberFieldGroup>
<NumberFieldDecrement />
<NumberFieldInput />
<NumberFieldIncrement />
</NumberFieldGroup>
</NumberField>Number Field