NumberInput
Carbon-spec number input. Adds increment/decrement buttons + numeric validation on top of TextInput. Step + min + max + precision wired to keyboard arrows.
Live playground
Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.
Edit JSX — preview updates livereact-live
import { NumberInput } from "@avala/design"; <NumberInput>NumberInput</NumberInput>
All variants
The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.
patterns-numberinput--defaultOpen in Storybook →
When to use
- Any numeric form field where the user benefits from up / down stepper buttons (quantity, port number, percentage).
- Bounded numerics with min / max / step constraints.
- Settings panels where keyboard arrows on a focused field should adjust the value.
When not to use
- Plain text inputs that happen to contain digits (phone, ID) → use `TextInput`.
- Range / slider input with two thumbs → use `Slider`.
- Currency / formatted decimals → wrap NumberInput yourself; the kit doesn't ship a formatted-money primitive.
- Time-of-day → not yet shipped; consider `TextInput`
type="time".