# Knob

> A rotary dial like on audio gear: drag, scroll or use the arrow keys.

Component · Pro · https://lodeui.com/components/knob

## When to use

- Audio, video and creative tools; compact controls for ranges.

## When not to use

- Precise values in forms: use a number field or slider.

## Installation

```bash
npx shadcn@latest add @lode/knob
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Knob } from "@/components/ui/knob";

<Knob label="Gain" defaultValue={60} format={(n) => `${Math.round(n)}%`} />
```

## API reference

### Knob

A dial with a value arc. Drag up or right to increase.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value / defaultValue / onValueChange | `number` | `50` | Controlled or uncontrolled. |
| min / max / step | `number` | `0 / 100 / 1` | Range and snapping. |
| size | `number` | `96` | Diameter in px. |
| label / format | `string / (n) => string` | – | Name and value text. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| ↑ / → | Increase by step |
| ↓ / ← | Decrease by step |
| Page Up / Page Down | 10% steps |
| Home / End | Min or max |

## Accessibility

- A labelled slider with min, max, now and formatted valuetext.

## Motion

- The dial and arc follow a spring; the knob presses in while dragged.

## Responsive behavior

- Fixed size; scroll-wheel works where available.

## Performance

- One spring drives rotation and arc.

## Notes for AI

- Use format for units so screen readers hear them.

## Related

- [Slider](https://lodeui.com/components/slider) — Drag, click or use the keys. The value rides above the thumb while you drag.
- [Range slider](https://lodeui.com/components/range-slider) — Two-thumb range with value bubbles and an optional live histogram.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.