Other

Knob

Circular dial input — a rotary slider driven by keyboard or vertical drag, with min/max/step, custom size and semantic colors. Exposes the full slider ARIA pattern.

Import

import { Knob } from "@zephora/react";

Examples

Basic

Drag vertically or focus the dial and use the arrow keys.

<Knob defaultValue={35} label="Volume" showValue />

Controlled with range and step

20°C

const [value, setValue] = React.useState(20);

<Knob
  value={value}
  onValueChange={setValue}
  min={0}
  max={40}
  step={5}
  size={96}
  label="Temperature"
  showValue
/>

Colors and states

<Knob defaultValue={70} color="success" label="Success" showValue />
<Knob defaultValue={50} color="warning" label="Warning" showValue />
<Knob defaultValue={90} color="danger" label="Danger" showValue />
<Knob defaultValue={30} disabled label="Disabled" showValue />
<Knob defaultValue={60} readOnly label="Read only" showValue />

API

Knob props

Prop	Type	Default	Description
`value`	`number`	—	Controlled value.
`defaultValue`	`number`	`min`	Initial value for uncontrolled usage.
`onValueChange`	`(value: number) => void`	—	Called whenever the value changes.
`min`	`number`	`0`	Lower bound.
`max`	`number`	`100`	Upper bound.
`step`	`number`	`1`	Snap increment for keyboard and drag.
`size`	`number`	`64`	Diameter in px.
`disabled`	`boolean`	`false`	Blocks all interaction.
`readOnly`	`boolean`	`false`	Focusable but not adjustable.
`label`	`string`	—	Accessible name for the dial (also used when aria-label is absent).
`showValue`	`boolean`	`false`	Renders the current value in the middle of the dial.
`color`	`"primary" \| "success" \| "warning" \| "danger"`	`"primary"`	Semantic color.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.

Keyboard

Key	Action
`ArrowUp / ArrowRight`	Increases the value by one step.
`ArrowDown / ArrowLeft`	Decreases the value by one step.
`PageUp / PageDown`	Changes the value by ten steps.
`Home / End`	Jumps to the minimum / maximum.