Color Input

Color inputs combine a swatch with a text field so users can both pick and inspect a color value.

Basic Usage

A color input should make the current color visible while still exposing the editable text value.

Resolved Values

Different input shapes are useful to show because users will often paste shorthand values while the control resolves and normalizes them.

Sizes

The color input should scale cleanly across the shared size system.

States

Show invalid, read-only, and disabled states when the color value participates in form validation. A read-only input keeps its value visible and copyable but blocks edits to both the swatch and hex field.