Color Wheel

ProNew

A hue ring you drag around or step with the arrow keys, built on a native range input for assistive technology, with the selected hue spoken in degrees and as a color family.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/color-wheel

Usage

The wheel edits the hue only and keeps saturation, brightness and alpha, so it pairs with ColorArea for the rest.

Props

Prop	Type	Default	Description
`value` / `onChange`	`HSVA`	-
`size`, `thickness`	`number`	`192`, `24`	Pixels.
`label`	`string`	`Hue`	Accessible name.
`disabled`	`boolean`

Accessibility

A native range input (0 to 359) covers the ring. Arrow Right/Up add a degree and Arrow Left/Down subtract, Shift or Page Up and Page Down change by 10, and the value wraps from 359 to 0.
aria-valuetext reads "120 degrees, green": the number for precision and a colour word for meaning.
Pointer: dragging anywhere on the ring sets the hue by angle. Touch scrolling is disabled on the wheel (touch-action: none) so a drag does not scroll the page.
The wheel is a picture of a color circle and keeps dir="ltr".

Testing

The component ships with a Testing Library test (color-wheel.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.

Guide and examples

Installation


pnpm dlx shadcn@latest add @tealmac-pro/color-wheel

Usage

The wheel edits the hue only and keeps saturation, brightness and alpha, so it pairs with ColorArea for the rest.

Props

Prop	Type	Default	Description
`value` / `onChange`	`HSVA`	-
`size`, `thickness`	`number`	`192`, `24`	Pixels.
`label`	`string`	`Hue`	Accessible name.
`disabled`	`boolean`

Accessibility

A native range input (0 to 359) covers the ring. Arrow Right/Up add a degree and Arrow Left/Down subtract, Shift or Page Up and Page Down change by 10, and the value wraps from 359 to 0.
aria-valuetext reads "120 degrees, green": the number for precision and a colour word for meaning.
Pointer: dragging anywhere on the ring sets the hue by angle. Touch scrolling is disabled on the wheel (touch-action: none) so a drag does not scroll the page.
The wheel is a picture of a color circle and keeps dir="ltr".

Testing

The component ships with a Testing Library test (color-wheel.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.