# Knob

A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.

Kit part · With the Kit · https://tactileui.dev/parts/knob

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The only custom element in the kit.

## Variants

- Small
- Large
- Black cap on any finish
- Stepped

## States

- Minimum
- Middle
- Maximum
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| min · max · step · value | attribute | The range and the start value. Values snap to the step. |
| label | attribute | Becomes the aria-label. |
| unit | attribute | Added to aria-valuetext. |
| labels | attribute | A name for each step from min, spoken instead of the number: a detented selector says “Team”, not “1”. Print the names round it too. |
| ticks | attribute |  |
| name | attribute | Form-associated: the value posts with the form under this name. |
| data-material | attribute | What the body, knurl, cap and pointer are made of, apart from the page’s finish: a porcelain knob on a Black page. The ticks are printed on the plate and keep the finish. Anodised blue and green go on a whole device only. |
| input · change | event | input while turning; change on release, and after each key or wheel step. |
| Drag | pointer | Up or right turns it up. Shift: five times finer. |
| Arrows · PageUp/PageDown · Home/End | keyboard | Up and Right turn it up. The wheel steps it while it has focus. |

## Usage notes

Drag up or right, scroll while it is focused, or use the arrow keys. Hold Shift for fine work.

## Accessibility

- Reached with Tab; every value is reachable from the keyboard, so dragging is never required.
- The wheel only turns it while it has focus, so scrolling the page never changes a setting by accident.

## Related parts

- [Fader](https://tactileui.dev/parts/fader): A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
- [Readout](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words.
- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.