Components

ColorInput

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 and disabled states when the color value participates in form validation.

API reference

ColorInput uses this package's Input, which wraps Base UI Input. Use the Base UI API reference for inherited input behavior and accessibility details.

Edit this page
Last updated: May 22, 2026, 6:53 PM