Color Picker

ProNew

A color field that pairs the native color chooser with an editable hex value and a live swatch.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/color-picker

Prop	Type	Default	Description
`value`	`string`	-	Controlled six-digit hex color, e.g. `#6d5ef7`.
`defaultValue`	`string`	`""`	Initial color when uncontrolled.
`onValueChange`	`(value: string) => void`	-	Called when either the chooser or the text changes.
`label`	`string`	`"Color"`	Accessible name used for both inputs.
`name`	`string`	-	Form field name for the hex text input.
`disabled`	`boolean`	`false`	Disables both inputs.

Also accepts all <div> props.

The text field accepts any input while typing and is marked aria-invalid until it holds a valid #rrggbb value. The swatch falls back to the muted color while the value is invalid.