Knob
A circular dial for entering a number in a range. It sweeps 270° with a gap at the bottom, and can be driven by dragging around the dial or with the keyboard: arrows step, Page Up and Page Down move ten steps, and Home and End jump to the ends. The printed value can be replaced with a template, and the arc colours are CSS variables so charts and themes can override them.
60
Drag around the dial, or focus it and use the arrow keys.
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { Knob } from "@carsxe/design-system/components/knob"Usage
tsx
import { Knob } from "@carsxe/design-system/components/knob"
const [value, setValue] = React.useState(60)
<Knob aria-label="Engine load" value={value} onValueChange={setValue} />Sizes
35
55
75
Value template and custom range
72%
320Nm
Colors
45
80
Inside a form
Read-only, disabled, and value hidden
40
40
API Reference
| Prop | Type | Default |
|---|---|---|
| value | number | — |
| defaultValue | number | 0 |
| onValueChange | (value: number) => void | — |
| min | number | 0 |
| max | number | 100 |
| step | number | 1 |
| size | number | 96 (px) |
| strokeWidth | number | 14 |
| showValue | boolean | true |
| children | ReactNode | (value: number) => ReactNode | — |
| valueColor | string | — |
| rangeColor | string | — |
| textColor | string | — |
| readOnly | boolean | false |
| disabled | boolean | false |
| name | string | — |