Color Area

ProNew

A two-dimensional saturation and brightness area for a hue, with a pointer thumb and two native range inputs for the keyboard and screen readers, spoken in plain words.

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-area

Usage

The area edits saturation and brightness for the current hue. Pair it with ColorSlider channel="hue" or ColorWheel, and keep the color as HSVA in state so the hue is not lost when the color becomes black or gray; convert with hsvaToHex when you save.

Props

Prop	Type	Description
`value` / `onChange`	`HSVA`	`{ h: 0-360, s: 0-1, v: 0-1, a: 0-1 }`.
`onChangeEnd`	`(value) => void`	After a drag or key press.
`label`	`string`	Prefix for the two input names.
`disabled`	`boolean`

Accessibility

Two native range inputs sit invisibly over the area, named "saturation" and "brightness", and both speak the pair of values ("50% saturation, 80% brightness"). They are normal tab stops, so assistive technology that lists sliders finds both.
Arrow keys move the axis in the direction pressed (Left/Right saturation, Up/Down brightness), Shift moves 10 points, Page Up and Page Down change brightness by 10, Home and End jump saturation to 0 and 100.
The focus ring is drawn around the whole area. The thumb is decorative; the color is also available as text elsewhere (pair it with Color Field).
The area keeps dir="ltr" in right-to-left pages: it pictures a color space, which must not mirror.

Testing

The component ships with a Testing Library test (color-area.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-area

Usage

Props

Prop	Type	Description
`value` / `onChange`	`HSVA`	`{ h: 0-360, s: 0-1, v: 0-1, a: 0-1 }`.
`onChangeEnd`	`(value) => void`	After a drag or key press.
`label`	`string`	Prefix for the two input names.
`disabled`	`boolean`

Accessibility

Two native range inputs sit invisibly over the area, named "saturation" and "brightness", and both speak the pair of values ("50% saturation, 80% brightness"). They are normal tab stops, so assistive technology that lists sliders finds both.
Arrow keys move the axis in the direction pressed (Left/Right saturation, Up/Down brightness), Shift moves 10 points, Page Up and Page Down change brightness by 10, Home and End jump saturation to 0 and 100.
The focus ring is drawn around the whole area. The thumb is decorative; the color is also available as text elsewhere (pair it with Color Field).
The area keeps dir="ltr" in right-to-left pages: it pictures a color space, which must not mirror.

Testing

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