Color Swatch Radio Group

ProNew

A palette of named colour swatches built on the radio group, with a check mark on the chosen one and its name announced. Use this when people pick a label, calendar or tag colour from a fixed set.

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.

value

defaultValue

label

name

disabled

Guide and examples

When to use it

Use it for labels, calendars, folders and tags, where the colours are a designed palette and each needs a name that can be read, searched and spoken.

Do not use it when people need any colour. Use a colour picker with hex input for that.

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.

Props

Prop	Type	Default	Description
`colors`	`{ value, name }[]`	12 colours	The palette. `value` is any CSS colour.
`value`	`string`	-	The chosen `value` (controlled).
`defaultValue`	`string`	-	Initial value.
`onValueChange`	`(value: string, name: string) => void`	-	Runs when a swatch is chosen.
`label`	`string`	`Colour`	Names the group.
`name`	`string`	generated	Radio group name, also the form field name.
`disabled`	`boolean`	`false`	Disables all swatches.

Accessibility

The swatches are the Radix radio group (role="radiogroup" with role="radio" items) named by label, so Tab, arrow keys and Space work as in any radio group.
Each radio is labelled with its colour name; the name of the chosen colour is also shown below the palette.
The chosen swatch shows a check mark and a ring, so state does not depend on colour perception.
Focus is a visible ring on the swatch.

Testing

The pattern ships with a Testing Library test (color-swatch-radio-group.test.tsx) that covers choosing with the keyboard, the group name, the check mark and the form value.