NumberInput Component
React number input with increment/decrement steppers, min/max clamping, arrow-key support, decimal input and spinbutton semantics — built with Tailwind CSS.
Import
1import { NumberInput } from "@neuctra/ui";Basic Usage
onChange receives the parsed number, or null while the field is empty.
Step & Decimals
Increments of 5
Sizes & Error
Value exceeds your plan limit
Props
All available props for the NumberInput component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | null / number | — | Controlled / uncontrolled value |
| onChange | (value: number | null) => void | — | Parsed number, null when empty |
| min / max | number | — | Clamped on blur and by the steppers |
| step | number | 1 | Stepper and arrow-key increment |
| label | string | — | Label above the field |
| error | string | — | Error message; paints the border and announces via role=alert |
| helperText | string | — | Muted helper line |
| size | "sm" | "md" | "lg" | "md" | Field height and button scale |
| disabled | boolean | false | Disable the field and steppers |
| wrapperClassName | string | — | Styles the outermost wrapper. |
| labelClassName | string | — | Styles the label above the field. |
| inputWrapperClassName | string | — | Styles the bordered control wrapping the decrement button, input, and increment button. |
| decrementButtonClassName | string | — | Styles the decrement (minus) button. |
| incrementButtonClassName | string | — | Styles the increment (plus) button. |
| helperTextClassName | string | — | Styles the helper/error text below the field. |
Accessibility
- The input exposes role="spinbutton" with aria-valuenow / min / max.
- ArrowUp / ArrowDown nudge the value by step; steppers are excluded from the tab order (tabIndex -1) so keyboard users aren't forced through three stops.
- Errors link to the field with aria-describedby and aria-invalid.
Frequently Asked Questions
How do I install and import the NumberInput component?
Install the @neuctra/ui package, then import it with: import { NumberInput } from "@neuctra/ui";
What variants and sizes does NumberInput support?
NumberInput supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the NumberInput component accessible?
NumberInput is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.