All componentsoutlinesubtleflushedxssmmdlg
Number Input
Numeric fields with increment and decrement steppers in outline, subtle, and flushed variants.
Variants
Sizes
Install
zsh — number-input
1bunx stylexblocks add number-inputUsage — Base UI
number-input.tsx
1234567891011121314151617import { NumberInput } from "#components/ui/base-ui/number-input.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( // Base UI's NumberField needs a Group around the input and steppers; // Control renders Increment/Decrement with chevron icons by default <NumberInput.Root defaultValue={4} min={0} variant="outline" size="md" palette={indigoPalette}> <NumberInput.Group> <NumberInput.Input aria-label="Quantity" /> <NumberInput.Control /> </NumberInput.Group> </NumberInput.Root> );}
// controlled: <NumberInput.Root value={value} onValueChange={setValue}>