CARDS & DECORATION

ColorPicker

Native <input type="color"> swatch paired with the design-system Input for a hex string. Both controls share a single value / onChange — the parent decides whether to validate the hex.

Import

import { ColorPicker } from 'damo-ui'

Basic — swatch + hex input

1function Example() {
2  const [color, setColor] = useState('#7a3980')
3  return <ColorPicker label="Accent" value={color} onChange={setColor} />
4}

Hide the hex input

1<ColorPicker
2  label="Accent"
3  value={color}
4  onChange={setColor}
5  showInput={false}
6/>

Hide the visible label

aria-label is preserved on both controls, so the component remains accessible even when the visible label is hidden.

1<ColorPicker
2  label="Background"
3  value={color}
4  onChange={setColor}
5  showLabel={false}
6/>

Props

ColorPicker props
PropTypeDefaultDescription
label*string—Visible label rendered above the controls. Also used as the aria-label on the swatch + hex input.
value*string—Current color string. Pass any value the consumer expects (typically a hex).
onChange*(next: string) => void—Fires whenever the swatch or the hex input emits a new value. Validate the string before re-binding it to state.
showInputbooleantrueHide the hex text input and show only the color swatch.
showLabelbooleantrueHide the visible label — aria-label is still wired for screen readers.
idstring—Override the auto-generated id used to wire the label and the color input.

Accessibility

  • Both the native swatch and the paired hex Input receive an aria-label derived from the label prop, so screen readers announce the control's purpose even when the visible label is hidden.
  • The swatch gets the standard focus-visible ring used across the lib; keyboard users tabbing into the field see a clear focus indicator before opening the OS color picker.
← SidebarUserCard →