/// Inputs

ColorSwatch

A single sharp color square — the primitive the color picker, color input, and accent pickers reuse.

import { ColorSwatch } from "@protocore/pds";

View as Markdown

Palette

Pass any CSS color to color. Swatches are square and sharp — no rounded corners — sized sm (16), md (24), or lg (32).

#3fcf8e

#2a6fdb

#e8533f

#c9a227

#a855f7

#8b8b8b

Selectable

Give a swatch an onClick and it renders as a real <button> with a pointer cursor and hover feedback. Mark the active one with selected to draw the accent ring. Interactive swatches require an aria-label.

Deployment accent: #3fcf8e

Alpha

Set checkered to paint a checkerboard behind the fill so translucent colors (8-digit hex or rgba()) read as partly transparent.

When to use it

ColorSwatch is a display primitive: a labelled color chip. Use it to preview a stored color, to build an accent / theme picker (a row of clickable swatches), or as the leading affordance inside a ColorInput. It is not a status indicator — for a small colored status dot next to a label, use StatusDot, whose color carries semantic tone. A swatch's color is arbitrary content, never a success/danger signal.

Usage

Give every interactive swatch an `aria-label` — the color is the only content.
Use `selected` to mark the chosen swatch in a picker row.
Turn on `checkered` when the color may be translucent.
Reuse it as the primitive inside custom color pickers.

Don't

Don't use a swatch for status — use StatusDot (semantic tone).
Don't add `onClick` without an accessible label.
Don't round the corners; swatches are square.
Don't distinguish swatches by color alone — pair with a text value.

Accessibility

Keys	Action
`Tab`	Focus the next interactive swatch (button variant only).
`Enter / Space`	Activate the focused swatch.

Without `onClick` the swatch is a non-interactive `<span>` — no pointer, no hover, no tab stop (affordance honesty).
With `onClick` it becomes a `<button>` and requires an `aria-label`, since the color square carries no text.
The selection ring is drawn with `outline`, so it never shifts surrounding layout.

`ColorSwatch` props

Prop	Type	Default	Description
`aria-label`	`string`	—	Accessible label — required when interactive (icon-only affordance).
`checkered`	`boolean`	—	Show a checkerboard behind the color so alpha/transparency reads through.
`className`	`string`	—
`color` *	`string`	—	The color to display — any CSS color string (`#3fcf8e`, `rgb(...)`, `transparent`).
`onClick`	`MouseEventHandler<HTMLElement>`	—	Click handler — when provided the swatch renders as a real `<button>`.
`selected`	`boolean`	—	Draw the accent selection ring around the swatch.
`size`	`enum`	`md`	Square size: `sm` (16) · `md` (24, default) · `lg` (32).
`style`	`CSSProperties`	—