Color Swatch

Displays a preview of a selected color.

Import

ts
import { ColorSwatch } from "@kobalte/core/color-swatch";
// or
import { Root } from "@kobalte/core/color-swatch";

ts
import { ColorSwatch } from "@kobalte/core/color-swatch";
// or
import { Root } from "@kobalte/core/color-swatch";

Features

Localized color descriptions for screen reader users.

Anatomy

The color swatch consists of:

ColorSwatch: The root container for the color swatch.

tsx
<ColorSwatch />

tsx
<ColorSwatch />

Example

Usage

ColorSwatch accepts a value via the value prop. The value should be Color object. You can obtain a Color object by using the parseColor function to parse a color from a string.

Value

Custom Color Name

API Reference

ColorSwatch

ColorSwatch is equivalent to the Root import from @kobalte/core/color-swatch.

Prop	Description
value	`Color` The color value to display in the swatch.
colorName	`string` A localized accessible name for the color. By default, a description is generated from the color value, but this can be overridden if you have a more specific color name (e.g. Pantone colors).
translations	`ColorSwatchIntlTranslations` Localization strings.

Rendered elements

Component	Default rendered element
`ColorSwatch`	`div`