A rotary control that clicks into steps.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/detent-dialPlayground
At the minimum
Disabled
Icons animation
Disabled
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/detent-dial
Accessibility
- Role slider with a text value that includes the unit.
- Minus and plus are labelled buttons.
Motion
- The indicator follows the pointer and pulls to each detent at 0.65.
- A flick coasts, then settles on a spring with a small bounce.
- Ticks swell around the indicator. Past the end it overshoots up to 10 degrees.
- With reduced motion, it snaps to the nearest detent and stops at the end.
Responsive behavior
- A 240 px dial in a 300 px tray.
Performance
- Ticks update through setAttribute from a motion value, so turning does not re-render React per frame.
- The held button repeat and any running spring are stopped on unmount.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import
DetentDialfrom@/components/fetaui/detent-dial. It composesIconButton. - It defaults to a temperature: 16 to 30 by 0.5, in °C. Set
label,unit,min,maxandstepfor anything else. onValueChangefires at each detent during a drag, so debounce any network call. The demo is not connected to a device.
Related
SliderComponentPick a value or a range by dragging. Line for forms, Bold for a headline value, Field for dense inspectors, all with one or two thumbs.Liquid SliderComponentA glass that fills as you drag, with a surface that behaves like water.Wheel PickerComponentThree wheels for a time. Set time waits until every wheel has settled.Amount PadComponentA send money keypad. The amount grows as you type and the send button carries it.