Forms

SwatchPicker

A color for something the person owns: a category, an account, a tag. One native radio per palette color, so the value is the key, such as chart-3, never a hex, and the color follows every theme. Each swatch is named after the hue it shows in the current theme, since the palette turns with the brand, and the chosen one carries a check. It takes colors of your own too, each standing for an id: the AGENTS.md builder on the home page picks its theme with one.

view .md

Installation

terminal

bash

npx @entrepta/cli@latest add swatch-picker

// Resolves dependencies, copies the source, and installs npm packages automatically.

Usage

swatch-picker.tsx

tsx

import { SwatchPicker } from "@/components/entrepta/swatch-picker"

<SwatchPicker legend="Color" value={category.color} onValueChange={setColor} />

// later, anywhere: <IconTile color={category.color} … />

Props

Prop	Type	Default	Description
legend	ReactNode	-	The question; hideLegend keeps it for screen readers
value, defaultValue, onValueChange	"chart-1" … "chart-8"	-	The palette key
options	palette keys \| { value, color, name }[]	the eight palette keys	Palette keys, named after their hue, or colors of your own, such as themes
names	Record<key, string>	-	Names of your own, in place of the hue names