THEME
MOTION
HAPTIC
SOUND
COUNTER
Numeric rocker "[−] LABEL VALUE [+]" — fused label/arrows read as one control. (Formerly named Stepper.)
Live demo
Import
import { Counter } from '@cathode-ui/react';Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | number | — | yes | |
onChange | (v: number) => void | — | yes | |
min | number | 0 | — | |
max | number | 100 | — | |
step | number | 1 | — | |
label | string | — | — | |
format | (v: number) => string | — | — | |
disabled | boolean | false | — |
Examples
wpm
<Counter value={wpm} onChange={setWpm} min={5} max={40} label="WPM" />Accessibility
Role: group
Feedback
| Haptic | tap |
| Sound | tick |
Motion states
idle · press