Color Swatch

Beta

Get Ritla UI

A product's colors as circles to choose from: a radio group with the chosen color's name beside its label.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add color-swatch
Also works with shadcn: npx shadcn@latest add @ritla/color-swatch
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

color-swatch.tsx

import { ColorSwatchGroup } from "@/components/ui/color-swatch";<ColorSwatchGroup  label="Color"  name="color"  options={[    { value: "cream", name: "Cream", color: "#d9c7ad" },    { value: "olive", name: "Olive", color: "#6b6b3a" },  ]}/>

API reference

ColorSwatchGroup

Prop	Type	Default	Description
`label`	`ReactNode`	None	The group's name (“Color”), followed by the chosen color's name.
`options`	`{ value, name, color, disabled? }[]`	None	The colors. `color` is the product's own color, any CSS color: product data, not a design token.
`value / defaultValue / onValueChange`	`string`	None	The chosen color. Default: the first.
`name`	`string`	None	Form field name.
`hideLabel`	`boolean`	`false`	Hides the label row; the group keeps its name for screen readers.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`ArrowRightArrowLeft`	Between colors; in Arabic, ArrowLeft goes to the next.
`Tab`	Enters the group on the chosen color and leaves it.

ARIA

A radiogroup named by its label, each circle a radio named by its color (“Cream”), because a color alone isn't seen by everyone.
A color that is out of stock is disabled, and its name says so (“Rust, sold out”).

Arabic and RTL notes

Mirrors

The circles start from the right, and the arrow keys flip.

Does not mirror

The colors themselves never change.

Numerals: It holds no numbers.
Arabic typography: label-14 Medium for the label, the color's name in gray/muted.