ComponentsProNew
Rotary Dial
A metal knob with six positions, like on old hardware. Real radio buttons inside, so arrow keys turn it too.
Customize
glowColor
Based on hungry-bat-66 by Pradeepsaranbishnoi (MIT license) · Terms of use
Props
8 properties| Property | Type | Default | Description |
|---|---|---|---|
| options | string[] | — | Up to six positions clockwise from the top. Defaults to OFF and 1 to 5. |
| defaultValue | number | 0 | Starting position index, from zero. |
| value | number | — | Controlled position. Without it the dial keeps its own. |
| onValueChange | (index: number, option: string) => void | — | Called with the index and label of the new position. |
| size | number | 230 | Dial diameter in pixels. |
| glowColor | string | "rgba(255, 255, 255, 0.85)" | Color of the light under the pointer. |
| label | string | "Mode" | Accessible name of the group. |
| className | string | — | Classes for the wrapper. |
Dependencies
2 required packages
npm install clsx tailwind-merge