Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99

--d --h --m --sGet Pro

Popover Color Swatch

ProNew

A fixed-palette colour picker in a popover where swatches are a named radio group with arrow-key selection and a check mark, never colour alone.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

label

Guide and examples

When to use it

Use this for labels, calendars and folders where colour comes from a small curated palette that must stay consistent.

Do not use it for free colour choice (use a colour picker) or for palettes of more than about twelve swatches.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Log in Get Pro for $35

Props

PopoverColorSwatch

Prop	Type	Default	Description
`swatches`	`{ value, name, color }[]`	-	The palette.
`value / onValueChange`	`string / fn`	-	Controlled selection.
`label`	`string`	`Color`	Accessible name of the trigger and the group.

Accessibility

Every swatch has a text name (aria-label and title), and the trigger spells out the current colour.
The selected swatch shows a check mark, so the state does not depend on colour perception.
Radix radio group: one tab stop, roving selection; choosing closes the popover and returns focus to the trigger.

Keyboard

Key	Action
Arrow keys	move and select the next swatch
Tab	leaves the group
Escape	closes without changing

Testing

The pattern ships a Testing Library test (popover-color-swatch.test.tsx) that covers the named trigger, the radio group semantics, choosing and focus return and arrow keys.