ColorPicker

The ColorPicker component allows users to select a color.

Playground

Props

Examples

Basic

Choose a color

Fullwidth

Fullwidth picker

Pre-selected Color

Red

Props

Prop	Type	Default	Description
`color`	`string`	-	The selected color value.
`defaultColor`	`string`	-	The default color value.
`fullwidth`	`boolean`	`false`	Makes the picker take up the full width.
`label`	`string`	-	The label text displayed next to the picker.
`onChange`	`(event: ChangeEvent<HTMLInputElement>) => void`	-	Callback function when the color changes.
`required`	`boolean`	`false`	Marks the input as required.

See also

MDN input type=“color”

Last updated on January 28, 2026

Collapsible Dropdown