Compact color control with native picker, hex entry, and brand preset swatches.
ColorPicker pairs the native <input type="color"> with a hex text field and an optional preset row so consumers can pick colours via OS picker, keyboard hex entry, or one-tap presets.
Pick from presets, type hex, or open the OS picker.
<ColorPicker aria-label="Brand color" defaultValue="#5EC551" />import { ColorPicker } from "@froggdesign/enter-ui-react";ColorPicker is a role="group" containing the swatch trigger, hex text field, and a preset radio group. Always provide aria-label so screen readers announce what the colour controls.
value / defaultValue: hex string (#RRGGBB).onValueChange(value): fires with normalised uppercase hex.presets: optional list of preset hex strings (defaults to brand palette).name: emits a hidden input for form submission.disabled, invalid, standard ARIA props supported.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.