revido kit
Start building
← All components
forms / beta

ColorPicker

A color swatch opening an accessible area, hue slider, hex field and optional preset colors.

LIVE PREVIEW
Loading preview…

When to use

  • Choosing a brand color in a theme builder.
  • Editing an arbitrary color with visual and exact hex controls.

Consider an alternative

  • Named categories — use Select.
  • Displaying a status — use Badge or StatusIcon.

Import

import { ColorPicker } from '@revido-llc/kit';

Keyboard interaction

  • Enter / Space — open the picker
  • Tab — move between channels, hex and presets
  • Arrow keys — adjust color channels or move between presets
  • Enter / blur — commit the hex field
  • Escape — close and return focus to the swatch

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.

aria-label (required)string—Accessible name for the swatch trigger and its popover.
onChange (required)(hex: string) => void—Called with an uppercase six-digit hex string when a color is picked.
value (required)string—Current color as a hex string.
classNamestring—Classes for the swatch trigger.
presetsstring[]—Optional hex colors offered as quick picks inside the popover.

Examples

Custom color

Pick visually or enter an exact hex value; the controlled value is always a hex string.

<ColorPicker aria-label="Brand color" value={color} onChange={setColor} />

With presets

Keep a short palette available alongside arbitrary color selection.

<ColorPicker aria-label="Brand color" value={color} onChange={setColor} presets={brandColors} />

Literal anatomy

Static component anatomy; bind events in the consuming app.

<ColorPicker aria-label="Custom color" value="hsl(210, 50%, 50%)" />

Related components