All components
Number Input
Numeric fields with increment and decrement steppers in outline, subtle, and flushed variants.
Variants
outline
subtle
flushed
Sizes
xs
sm
md
lg
Install
zsh — number-input
1bunx stylexblocks add number-inputUsage — Ark UI
number-input.tsx
123456789101112131415import { NumberInput } from "#components/ui/ark-ui/number-input.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // variant/size resolve once on Root; Control renders the stepper // triggers with chevron icons by default <NumberInput.Root defaultValue="4" min={0} variant="outline" size="md" palette={indigoPalette}> <NumberInput.Input aria-label="Quantity" /> <NumberInput.Control /> </NumberInput.Root> );}
// controlled: <NumberInput.Root value={value} onValueChange={(d) => setValue(d.value)}>