KQ-111 · RING/DIAL
Ring Dial
A lens ring in perspective — a knurled band whose detents pull the value in like magnets as you cross them; the fixed needle blinks on every land and the hub pulses the committed stop.
KQ-111 · RING/DIAL
Aperture Ring · 5 StopsKQ-111
- Stop
- f/2.8
- Light
- 056
KQ-111 · Ring Dial · Sweep 300° · P 800 · ζ 0.83
Turn the ring - each stop pulls it in like a magnet.
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/ring-dial
Props
- min / max / detents / step
- number / number / number[] / number
- default 0 / 100 / — / 10
- Range and stops; explicit detents win over the step grid.
- value / defaultValue / onValueChange / onInput
- number / number / (value) => void / (value) => void
- default —
- Controlled or uncontrolled value; change fires per land, input streams live.
- format
- (value) => string
- default —
- Formats the hub readout, band numerals, and aria-valuetext.
- size
- number
- default 220
- Dial diameter in px.
| Prop | Type | Default | Description |
|---|---|---|---|
| min / max / detents / step | number / number / number[] / number | 0 / 100 / — / 10 | Range and stops; explicit detents win over the step grid. |
| value / defaultValue / onValueChange / onInput | number / number / (value) => void / (value) => void | — | Controlled or uncontrolled value; change fires per land, input streams live. |
| format | (value) => string | — | Formats the hub readout, band numerals, and aria-valuetext. |
| size | number | 220 | Dial diameter in px. |