ColorPicker

Native color well plus an editable hex field and optional preset swatches, all two-way synced. The hex text input carries the form name, so the value submits natively.

Example

Theme color

<ColorPicker
  id="theme-color"
  label="Theme color"
  name="theme-color"
  presets={["#4f46e5", "#16a34a", "#dc2626"]}
/>

Props

Prop	Type	Default	Description
`id`	`string`	-	Required. Base for the hex input id and message ids.
`label`	`string`	-	Visible label; also names the picker and preset group.
`name`	`string`	`id`	Hex input form name.
`value`	`string`	`#4f46e5`	Initial `#rrggbb` color.
`presets`	`string[]`	`[]`	Swatch colors; each renders a `Use color …` button.
`hint`	`string`	-	Help text below the control.
`error`	`string`	-	Error message; sets `aria-invalid` on the hex input.
`disabled`	`boolean`	`false`	Non-interactive.
`class`	`string`	-	Style passthrough.

Accessibility

Hex field uses the Field label; the native well is named <label> picker so the two names differ.
Swatches are real buttons named Use color … inside a named presets group.
An unparseable hex value flags the field with aria-invalid="true" until it validates.