Number stepper
Updated
NumberInput is a native number input between blocky minus and plus buttons. The buttons invert on hover, steps clamp to min and max, and the arrow keys step it too. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
import "@/components/dithercharts/controls.css"
import { NumberInput } from "@/components/dithercharts/number-input"
<NumberInput label="Quantity" defaultValue={3} min={0} max={99} />
<NumberInput label="Price" defaultValue={2.5} min={0} step={0.5} />
<NumberInput label="Seats" defaultValue={5} disabled />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add number-input
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | Type ReactNode | Default – | The caption above the field, and its accessible name. |
| onValueChange | Type (value: number) => void | Default – | Called with the new value as it is typed or stepped; NaN while the field is empty. |
| hint | Type ReactNode | Default – | Help text under the field, read after its label. |
| error | Type ReactNode | Default – | An error under the field; it also marks the field invalid. |