Color Picker

The Color Picker component allows users to select a color from predefined options or optionally provide a custom value.

Usage

Default

Choose a color

RedGreenBlueYellow

<ColorPicker 
  colors={[
    { label: "Red", value: "#e63946" },
    { label: "Green", value: "#2a9d8f" },
    { label: "Blue", value: "#457b9d" },
    { label: "Yellow", value: "#f4a261" },
  ]}
  selected={selected}
  onChange={setSelected}
/>

Props

Sortable data table
Prop	Type	Default	Description
label	string	"Choose a color"	Accessible label for the color picker.
colors	{ label: string; value: string; }[]	-	Array of color options for the picker.
selected	string	-	Currently selected color value.
onChange	(color: string) => void	-	Callback fired when a color is selected.
name	string	"color-picker"	Name attribute for form integrations.
disabled	boolean	false	Disables the color picker.
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Size of the color swatches and controls.
shape	"square", "round", "pill"	"round"	Shape of the color swatches.
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow style for the color swatches.
allowCustom	boolean	false	Allows the user to input a custom color value.
className	string	-	Additional CSS classes for the container.
data-testid	string	"color-picker"	Test ID for targeting the component in tests.