# Detent Dial

A rotary control that clicks into steps.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/detent-dial
```

## Usage

```tsx
import { DetentDial } from '@/components/fetaui/detent-dial'

export function Example() {
  return <DetentDial label="Temperature" min={16} max={30} onValueChange={setTemp} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| value | number |  |
| defaultValue | number | 21 |
| onValueChange | (value) => void |  |
| min, max, step | number | 16, 30, 0.5 |
| label | string | Temperature |
| unit | string | °C |
| disabled | boolean | false |
| animated | boolean | true |

## When to use

- For one value in a known range that people adjust often, like temperature.

## When not to use

- When the range is long or precise entry matters: use Slider.

## 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.