NumberInput
A numeric field with increment and decrement buttons. Values are formatted with Intl.NumberFormat and typed text is parsed in the same locale, so 1.234,5 works in tr-TR and 1,234.5 in en-US.
const [seats, setSeats] = useState<number | null>(1);
<Field label="Seats">
<NumberInput value={seats} onValueChange={setSeats} min={1} max={50} name="seats" />
</Field>Import
import { NumberInput } from "@meridui/react";Examples
Currency, percent and units
formatOptions is passed to Intl.NumberFormat. For percent, the value is the fraction (0.15 shows as 15%).
<NumberInput defaultValue={1499.9} step={0.5} locale="en-US" formatOptions={{ style: "currency", currency: "USD" }} />
<NumberInput defaultValue={0.15} step={0.01} min={0} max={1} formatOptions={{ style: "percent" }} />
<NumberInput defaultValue={2.5} step={0.1} locale="de-DE" formatOptions={{ style: "unit", unit: "kilogram" }} />Sizes and states
<NumberInput aria-label="Small" size="sm" defaultValue={3} />
<NumberInput aria-label="No stepper" hideStepper defaultValue={10} />
<NumberInput aria-label="Invalid" invalid defaultValue={-1} />
<NumberInput aria-label="Disabled" disabled defaultValue={5} />API reference
Accepts every <input> attribute except type, value, defaultValue, onChange, size, min, max and step; the ref goes to the <input>. className and style go on the wrapper. Picks up Field wiring like Input.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | – | Controlled value; null is empty. |
defaultValue | number | null | null | Initial value when uncontrolled. |
onValueChange | (value: number | null) => void | – | Called with the committed value (on step, Enter or blur). |
min / max | number | – | Limits. Values are clamped; the matching button disables at a limit. |
step | number | 1 | Amount added by buttons and arrow keys. |
largeStep | number | step * 10 | Amount added by Page Up / Page Down. |
locale | string | runtime locale | Locale for formatting and parsing. |
formatOptions | Intl.NumberFormatOptions | – | Currency, percent, unit, fraction digits… |
size | "sm" | "md" | "lg" | "md" | Height. |
invalid | boolean | – | aria-invalid and the danger border. |
hideStepper | boolean | false | Hide the buttons. |
incrementLabel | string | "Increase" | Accessible name of the + button. |
decrementLabel | string | "Decrease" | Accessible name of the − button. |
name | string | – | Hidden input with the raw number (no formatting). |
Styling
| Class | Element |
|---|---|
.mrd-number-input | Wrapper (data-size, data-invalid, data-disabled) |
.mrd-number-input__field | The <input role="spinbutton"> |
.mrd-number-input__stepper, .mrd-number-input__step | Button group and each button |
Accessibility
The field is a role="spinbutton" with aria-valuenow, aria-valuemin, aria-valuemax and a formatted aria-valuetext. The buttons are not tab stops (tabindex="-1"): the keyboard path is the arrow keys, following the APG spinbutton pattern. Each button is at least 24×24px.
| Key | Action |
|---|---|
| ArrowUpArrowDown | Increase / decrease by step. |
| PageUpPageDown | Increase / decrease by largeStep. |
| HomeEnd | Set to min / max (when set). |
| Enter | Commit the typed text. |