Sizing and swatch geometry for a native color input. These classes belong to the opt-in Official preset. Add
@presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight
used alongside these structural shortcuts.
Classes
color-input
Example
The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.
<label for="accent">Accent color</label>
<input id="accent" class="color-input" type="color" name="accent" value="#4565a7">Variants and composition
The single color-input class styles the native input, including its swatch.
It uses width/height spacing step 9 below sm, and step 8 at sm and above
(36px and 32px with default spacing). Resize both dimensions, at each
applicable breakpoint, rather than relying on a component-specific size modifier.
Behavior and accessibility
The browser retains the picker, focus, and disabled state. Supply a visible label and a text representation of the value when users need to read the exact color.
Reference
See the interactive Storybook specimen. Continue to Divider or return to the Official preset overview.