Swatch

stable llms.txt

Displays a color value as a small preview square. Shows a checkerboard pattern for transparent or empty colors.

Installation

bash

Used inside Input

Input.ColorSwatch is a bond-connected wrapper around this standalone Swatch. When placed inside Input.Root next to Input.ColorControl, it reads the current color from the bond automatically — no color prop needed.

Examples

Explore different variations and use cases

Basic

Pass any valid CSS color string.

Transparent & Empty

Checkerboard pattern shows when color is transparent or empty.

Sizes

Control size via Tailwind classes.

Radius

Any border-radius works — square, rounded, or circle.

With ColorControl

Input.ColorSwatch sits inside Input.Root and reads the color value from the bond — no prop needed.

API Reference

Accessibility

Decorative by default — add aria-label when the color carries meaning
Checkerboard pattern communicates transparency visually
Use sufficient contrast between swatch border and background

Stepper

Tabs