Counter Input
Accessible increment / decrement stepper for numeric values. Used for guest counts, bedroom selectors, and similar booking fields. Supports min, max, step, and compact density.
core/counter-inputInstallation
1 · Add registry to components.json
2 · Install component
Examples
Default
Adults / children counters with min / max constraints.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
valuereq | number | — | Controlled numeric value. |
onChangereq | (value: number) => void | — | Called when the value changes. |
labelreq | string | — | Display label for the counter row. |
description | string | — | Optional sub-label (e.g. age range). |
min | number | 0 | Minimum value. Decrement is disabled at this bound. |
max | number | — | Maximum value. Increment is disabled at this bound. |
step | number | 1 | Increment / decrement step. |
disabled | boolean | — | Disables both buttons. |
density | "default" | "compact" | "default" | Visual density — compact reduces size and spacing. |
className | string | — | Additional classes applied to the container div. |