Forms & Inputs
Number Input
A controlled numeric field with decrement/increment buttons that clamp to min and max.
A controlled numeric field with a decrement and an increment button flanking a centered value.
Import
tsx
1import { NumberInput } from "@yuhuanowo/yunui";Usage
It is fully controlled: pass value (a number) and onChange, which receives the next number — already clamped to min/max. The step buttons disable themselves at either bound, so a user can't push past the range and then wonder why nothing happened.
Number input
Value: 3 — clamped to 0–10, so the buttons disable at either end.
Errors
error turns the border red, sets aria-invalid, and renders the message below the field wired up via aria-describedby — so a screen reader reads the error as part of the field, not as loose text next to it.
Error state
Pick at least one seat.
Notes
- The input is
text-baseon mobile andtext-smfrommdup. That is deliberate: iOS Safari zooms the whole page when a focused input's font is under 16px. - The native number spinners are hidden (the
yunui-numberclass) — the component's own buttons replace them, so the control looks the same in every browser. - Both step buttons are labelled; override the English defaults with
labels={{ increment, decrement }}.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| error | string | — | Error message shown below the field; also switches the border to a red error style. |
| labels | { increment?: string; decrement?: string; } | undefined | — | Accessible labels for the steppers (English defaults). |
| max | number | — | |
| min | number | — | |
| onChange | ((value: number) => void) | — | Called with the next clamped value. |
| step | number | 1 | Increment/decrement step. |
| value | number | — | Current value (controlled). |