NumberField
A bounded numeric stepper that survives decimals and repeated actions.
Live — this one is real
Usage
import { useState } from "react";
import { NumberField } from "mizu-ui";
export function Example() {
const [value, setValue] = useState(3);
return (
<NumberField
label="Seats"
value={value}
onValueChange={setValue}
min={1}
max={12}
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect forms/Selection.tsx
Source is included in the npm package under src/forms/Selection.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | number / function | — | Controlled numeric value. |
| min / max | number | — | Inclusive bounds. |
| step | number | 1 | Increment size. |
Accessibility
A labelled native number input plus named increase/decrease buttons. Bounds disable impossible actions.
Motion
CSS transitions explain state changes. Reduced motion removes travel.