Skip to content
Data Input

ColorPicker

HSV color picker with optional ColorSwatch presets.

React source Core source

ColorPicker

Full HSV color picker with a saturation panel, hue slider, optional alpha slider, and built-in preset swatches. This page also documents ColorSwatch — a compact chip for external palettes wired to the same controlled color.

Examples

Default

Seed with defaultValue (or control via value / onChange). Built-in swatches come from DEFAULT_COLOR_SWATCHES unless you pass swatches.
Demo.tsxtsx
import { ColorPicker } from '@var-ui/react';

<ColorPicker defaultValue="#228be6" />

With ColorSwatch

Hide the picker’s built-in row (swatches={[]}) and drive the color from standalone ColorSwatch buttons — useful when presets live outside the picker chrome.
Demo.tsxtsx
import { ColorPicker, ColorSwatch, HStack } from '@var-ui/react';

<ColorPicker value={color} onChange={setColor} swatches={[]} />
<HStack gap="sm">
  <ColorSwatch
    color="#228be6"
    selected={color === '#228be6'}
    aria-label="Blue"
    onClick={() => setColor('#228be6')}
  />
  <ColorSwatch
    color="#40c057"
    selected={color === '#40c057'}
    aria-label="Green"
    onClick={() => setColor('#40c057')}
  />
</HStack>

Props

Accessibility

Saturation uses role="application" with arrow-key nudges; hue and alpha are role="slider". Built-in swatches are a listbox of options with aria-selected. Standalone ColorSwatch is a button with aria-pressed when selected. Give every external swatch an aria-label (the hex or a color name).