ColorPicker

ColorPicker is a component used by the user to select a color or enter an arbitrary color value.

The ColorPicker follows the WAI-ARIA - Combobox Pattern for accessibility.

If you are not using FormControl, set aria-label or aria-labelledby to ColorPicker.

<ColorPicker placeholder="#4387f4" aria-label="Pick color" />

Copied!

<VStack gap="sm">
  <Heading as="h3" id="label">
    Pick Color
  </Heading>

  <ColorPicker placeholder="#4387f4" aria-labelledby="label" />
</VStack>

Copied!

Key	Description	State
`Escape`	Closes the dialog.	`closeOnEsc={true}`

ARIA Roles and Attributes

Component	Roles and Attributes	Usage
`ColorPickerField` Internal	`role="combobox"`	Indicates that this is a combobox.
	`aria-haspopup="dialog"`	Indicates that a dialog exists.
	`aria-expanded`	Set to `"true"` when the dialog is open, `"false"` when closed.
	`aria-controls`	Set to the `id` of the related `ColorSelector` when open, `undefined` when closed.
	`aria-readonly`	Set to `"true"` when `isReadOnly` is set.
	`aria-disabled`	Set to `"true"` when `isDisabled` is set.
	`aria-invalid`	Set to `"true"` when `isInvalid` is set.
	`aria-required`	Set to `"true"` when `isRequired` is set.
`ColorPickerSwatch` Internal	`role="img"`	Indicates that this is an image.
	`aria-roledescription`	Set to `"color swatch"`.
	`aria-label`	Set to the current value, such as `"#141414"`.
`ColorPickerEyeDropper` Internal	`role="button"`	Indicates that this is a button.
	`aria-label`	`"Pick a color"` is set.
`ColorSelector` Internal	`role="dialog"`	Indicates that this is a dialog.
	`id`	The `id` used to associate with `ColorPickerField`.
	`aria-hidden`	Set to `"true"` when the dialog is open, `"false"` when closed.
`SaturationSliderThumb` Internal	`role="slider"`	Indicates that the element is a slider.
	`aria-roledescription`	`"2D slider"` is set.
	`aria-label`	`"Saturation and brightness thumb"` is set.
	`aria-valuemin`	Sets the `0` value.
	`aria-valuemax`	Sets the `100` value.
	`aria-valuenow`	The current value is set.
	`aria-valuetext`	Sets the current value, such as `"saturation 0.72, brightness 0.96"`.
`HueSliderThumb` Internal	`role="slider"`	Indicates that this is a slider.
	`aria-label`	Sets `"Slider thumb"`.
	`aria-valuemin`	Sets the `0` value.
	`aria-valuemax`	Sets the `360` value.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value, such as `"18°, Red"`.
`AlphaSliderThumb` Internal	`role="slider"`	Indicates that the element is a slider.
	`aria-label`	Sets `"Slider thumb"`.
	`aria-valuemin`	Sets the `0` value.
	`aria-valuemax`	Sets the `1` value.
	`aria-valuenow`	Sets the current value.
	`aria-valuetext`	Sets the current value, such as `"18%"`.

Edit this page on GitHub

PreviousYearPicker NextFileInput