Number Field
A number between minus and plus buttons, for guests, nights or amounts. It formats with Intl (currency, units, percent) and the number rolls when the buttons change it.
import { NumberField } from "pleate/number-field";Count and currency
Sizes and states
Props
- value / defaultValue / onValueChange
The number.
numberdefault 0- min / max
Bounds; the buttons switch off at them.
number- step
Increment; its decimals set the rounding.
numberdefault 1- format
How the number is shown.
Intl.NumberFormatOptions- size
Height, padding and type size.
"sm" | "md" | "lg"default "md"- variant
Field look.
"outline" | "filled" | "surface"default "filled"- disabled / invalid
States.
boolean
Accessibility
- The input has role="spinbutton" with aria-valuenow/min/max and a formatted aria-valuetext.
- ArrowUp/Down step, PageUp/Down take ten steps, Home/End jump to the bounds.
- The buttons are named Decrease and Increase and are left out of the tab order (the keys cover them).
- Name it with aria-label or aria-labelledby.