# Knob

> Radial dial input. A signal-forms native control: the value is a `number`, snapped to `step` and clamped to `[min, max]`. Drag around the dial or use arrow keys (Shift = ×10); Home / End jump to the ends.

Source: https://ngwr.dev/reference/components/knob  
Kind: Signal Forms

## Installation

```angular-ts
import { WrKnob } from 'ngwr/knob';

@Component({ imports: [WrKnob] })
export class MyComponent {}
```

## Basic

```angular-html
<wr-knob [(value)]="value" [min]="0" [max]="100" suffix="%" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `ariaLabel` | Accessible name — the role needs one. Falls back to `knob.label`. | `string \| null` | `null` |
| `min` | Minimum allowed value. | `number \| undefined` | `0` |
| `max` | Maximum allowed value. | `number \| undefined` | `100` |
| `step` | Step granularity. | `number` | `1` |
| `size` | Dial diameter in CSS pixels. | `number` | `120` |
| `strokeWidth` | Stroke width of the dial arc, in CSS pixels. | `number` | `8` |
| `trackColor` | Track (unfilled) color. | `string` | `rgba(--wr-color-light, 0.6)` |
| `valueColor` | Filled-arc color. | `string` | `var(--wr-color-primary)` |
| `showValue` | Show the value text in the center. | `boolean` | `true` |
| `suffix` | Optional suffix appended to the center text (e.g. `'%'`). | `string` | `''` |
| `readonly` | Read-only — disables interaction but keeps the visual. | `boolean` | `false` |
| `disabled` | Disable interaction. | `boolean` | `false` |
| `value` | Bound by `[formField]`, or two-way via `[(value)]`. | `number` | `0` |
| `(touch)` | Emitted on blur so a bound field can mark itself touched. | `void` | — |