1. Components
  2. Colors
  3. Color Area

Color Area

ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

Aria docsReport an issueEdit this page
<ColorArea />

Installation

npx dotui-cli@latest add color-area

Anatomy

import { ColorArea } from "@/components/core/color-area";
 
<ColorArea />;
import { ColorAreaRoot } from "@/components/core/color-area";
import { ColorThumb } from "@/components/core/color-thumb";
 
<ColorAreaRoot>
  <ColorThumb />
</ColorAreaRoot>;

Unontrolled

An initial, uncontrolled value can be provided to the ColorArea using the defaultValue prop.

<ColorArea defaultValue="hsl(30, 100%, 50%)" />

Controlled

Use the value and onChange props to control the value of the slider.

Selected color : hsla(0, 100%, 50%, 1)

const [value, setValue] = React.useState(parseColor("hsl(0, 100%, 50%)"))
return <ColorArea value={value} onChange={setValue} xChannel="saturation" yChannel="lightness" />

Channels

xChannel and yChannel props may be provided to specify which color channels the color area should display

<ColorArea xChannel="red" yChannel="blue" />

Options

Disabled

Use the isDisabled prop to disable the color area.

<ColorArea isDisabled />

Composition

If you need to customize things further, you can drop down to the composition level.

<ColorAreaRoot>
  <ColorThumb />
</ColorAreaRoot>

API Reference

PropTypeDefaultDescription
xNamestring-The name of the y channel input element, used when submitting an HTML form.
yNamestring-The name of the y channel input element, used when submitting an HTML form.
colorSpace'rgb' | 'hsl' | 'hsb'-The color space that the color area operates in. The xChannel and yChannel must be in this color space. If not provided, this defaults to the color space of the color or defaultColor value.
xChannel'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha'-Color channel for the horizontal axis.
yChannel'hue' | 'saturation' | 'brightness' | 'lightness' | 'red' | 'green' | 'blue' | 'alpha'-Color channel for the vertical axis.
isDisabledboolean-Whether the ColorArea is disabled.
valueT-The current value (controlled).
defaultValueT-The default value (uncontrolled).
childrenReactNode | (values: ColorAreaRenderProps & {defaultChildren: ReactNode | undefined}) => ReactNode-The children of the component. A function may be provided to alter the children based on component state.
classNamestring-The CSS className for the element.
styleCSSProperties | (values: ColorAreaRenderProps & {defaultStyle: CSSProperties}) => CSSProperties-The inline style for the element. A function may be provided to compute the style based on component state.
EventTypeDescription
onChange(value: Color) => voidHandler that is called when the value changes, as the user drags.
onChangeEnd(value: Color) => voidHandler that is called when the user stops dragging.

Accessibility

Keyboard interactions

KeyDescription
TabPlaces focus on the handle. If the handle is already in focus, moves focus to the next element in the page tab sequence.
Shift+TabPlaces focus on the previous element in the page tab sequence.
ArrowRight ArrowLeft ArrowDown ArrowUpMoves the handle up/down/left/right.

Last updated on 10/11/2024

Date Range PickerColor Field
dotUI

Bringing singularity to the web.

Community

Built by mehdibha. The source code is available on GitHub.