# Knob

A rotary control for instruments rather than forms: drag up or down, Shift for fine, arrows to step, double-click to return home — with log tapers for frequencies and times.

- Family: Signature, imported from `mizu-ui` or `mizu-ui/signature`
- Docs: https://mizu.user64bit.world/components/knob
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/signature/Controls.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { Knob } from "mizu-ui";

export function Example() {
  const [cutoff, setCutoff] = useState(1200);
  return (
    <Knob
      label="Cutoff"
      min={40}
      max={16000}
      taper="log"
      value={cutoff}
      onValueChange={setCutoff}
      format={(v) => (v >= 1000 ? `${(v / 1000).toFixed(1)} kHz` : `${v} Hz`)}
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/knob
```

## Props

- `label / value / defaultValue / onValueChange`: `string / number`. The control's name and value.
- `onValueCommit`: `(value) => void`. When a drag, key press or reset finishes: the moment to save or send.
- `min / max / step / taper`: `number / linear | log`. Range (0–100) and step (1); a log taper spreads ratios evenly and needs a positive min.
- `format / resetValue`: `(value) => string / number`. Readout text, and where a reset returns (defaultValue).
- `bipolar / size`: `boolean / number`. Fill from the centre, for pans and offsets; diameter (64).
- `name / disabled`: `string / boolean`. Submit with a form; switch off.

## Keyboard

- ↑ → ↓ ←: Step up or down
- Shift+arrows PageUp PageDown: A tenth of the range
- Home End: Minimum or maximum
- Backspace Delete: Return home

## Accessibility

Behind the drawing is a native range input: it takes focus, answers the arrow, Page, Home and End keys, reads its value as formatted text, and submits with a form when named. Shift steps by a tenth of the range, Backspace or Delete returns home, and focus shows in the accent.

## Motion

The value arc and pointer spring to changes from keys, resets and code, and follow the hand directly while dragging; bipolar knobs fill from the centre. Reduced motion jumps instead of springing.