Dial
betaA rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add dialnpm packages installed: class-variance-authority.
import { Dial } from "@/components/ui/dial";Default
Gallery
<Dial>
| Prop | Type | Default |
|---|---|---|
captionExtra content under the readout, e.g. a unit or caption. | ReactNode | — |
defaultValue | number | — |
detentsTick marks around the dial, ends included. | number | 11 |
disabled | boolean | false |
formatThe readout in the middle, and the default value text. | (value: number) => string | (value) => String(value) |
max | number | 100 |
min | number | 0 |
onValueChange | (value: number) => void | — |
pageStepPageUp/PageDown distance. Defaults to a tenth of the range. | number | — |
size | "sm" | "md" | "lg" | "md" |
snapToDetentsSnap every input to the detents rather than to | boolean | false |
step | number | 1 |
sweepDegrees of travel from min to max. | number | 270 |
value | number | — |
Plus every attribute of <div> except defaultValue, onChange, children.
The dial is the role="slider" element (name it with aria-label or aria-labelledby), with aria-valuetext from `format`. Arrow keys step, PageUp/PageDown move a page, Home/End go to the ends. Dragging points the notch at the pointer; the wheel turns it only while it has focus, so it never steals page scroll. Clockwise means more in every language, so neither the dial nor its arrow keys mirror in right-to-left layouts. The knob's rotation settles instantly under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes