Fields

Color Swatch Picker

A compact radio group for choosing one named color chip.

When to use it: Use it when the available colors are few, known, and worth seeing at once.

On this page

Example
Anatomy
Step by step
Keyboard
Forms and accessibility
API reference

Example

Accent color

Color Swatch Picker.tsxtsx

import { ColorSwatchPicker, ColorSwatchPickerItem, Legend } from "@comp0/react";

const colors = [
  ["Ocean", "#0f766e"],
  ["Sky", "#2563eb"],
  ["Grape", "#7c3aed"],
  ["Rose", "#e11d48"],
] as const;

export function Example() {
  return (
    <ColorSwatchPicker name="accent" defaultValue="#2563eb" className="border-0 p-0">
      <Legend className="mb-3 text-sm font-medium text-zinc-900 dark:text-zinc-100">
        Accent color
      </Legend>
      <div className="flex gap-3">
        {colors.map(([name, color]) => (
          <ColorSwatchPickerItem
            key={color}
            color={color}
            inputProps={{ "aria-label": name }}
            className="size-9 cursor-pointer rounded-full border-2 border-white outline outline-1 outline-zinc-950/15 ring-2 ring-transparent ring-offset-2 data-focused:ring-teal-600 data-selected:ring-zinc-950 dark:border-zinc-950 dark:outline-white/20 dark:ring-offset-zinc-950 dark:data-focused:ring-teal-400 dark:data-selected:ring-white"
          />
        ))}
      </div>
    </ColorSwatchPicker>
  );
}

Anatomy

Dashed frames are invisible state providers; shaded shapes own real DOM. Numbered pins match the list below.

ColorSwatchPicker
Native radio group that normalizes one selected hex color. Owns a DOM element.
Legend
Native fieldset legend naming the color choice. Owns a DOM element.
ColorSwatchPickerItem
Native radio label painted with its required hex color. Owns a DOM element.

Step by step

1
Add the main part
Start ColorSwatchPicker with a Legend that says what the color controls.
2
Add the supporting parts
Add one ColorSwatchPickerItem for each valid hex color.

Make the behavior clear

Give the picker a name when it belongs in a form; selected colors are normalized to lowercase six-digit hex values.

Exampletsx

<ColorSwatchPicker name="accent" defaultValue="#2563eb">
  <Legend>Accent color</Legend>
  <ColorSwatchPickerItem color="#2563eb" aria-label="Blue" />
</ColorSwatchPicker>;

Keyboard

→↓: Moves and selects the next color.
←↑: Moves and selects the previous color.
Space: Selects the focused color.

Forms and accessibility

Submits one native radio value under name as a normalized lowercase #rrggbb color.

Accessibility checklist

Use Legend to name the color choice and give each swatch a specific visible or accessible name.
Show which color is selected with a border, checkmark, or text in addition to the color itself.
Keep the allowed palette small; use Color Picker when people need an arbitrary color.

API reference

Importtsx

import { ColorSwatchPicker, ColorSwatchPickerItem, Legend } from "@comp0/react";