Color Picker ​

The Color Picker allows users to select a precise color through an interactive gradient canvas, hue and opacity sliders, and hex/RGBA input fields. It is primarily used in setup and configuration contexts where users need to define brand colors for touchpoints such as kiosks and displays.

When to use ​

  • In settings or configuration pages where users define brand or theme colors
  • When a precise color value (hex, RGBA) is required from the user
  • To replace native <input type="color"> when a more complete and consistent UI is needed

When not to use ​

  • When a predefined set of colors is sufficient (use chips, swatches, or a select)
  • In forms where the user only needs to pick from the design system palette

Default ​

Click the trigger to open the picker. Click outside or press Enter in the hex field to close.

Without opacity ​

Without inputs ​

Disabled ​

Sizes ​

Use the size prop to match the height of other form inputs: sm, md (default), lg.

Multiple pickers ​

Props ​

PropTypeDefaultDescription
model-valueString#000000The current color value in hex format (with #)
show-alphaBooleantrueShow the opacity slider and alpha input column
show-inputsBooleantrueShow the hex and RGBA input row
disabledBooleanfalseDisables all interactions
sizeString-Trigger size variant: sm, lg

Events ​

EventPayloadDescription
update:modelValueStringEmitted on any color change. Payload is a #RRGGBB hex string
change{ hex, r, g, b, a }Emitted with the full color object including alpha (0–100)

Accessibility ​

  • The trigger button is keyboard-focusable and togglable with Enter or Space
  • Gradient canvas supports mouse and touch drag
  • Hue and opacity sliders are native <input type="range"> — keyboard-navigable
  • Click outside the component closes the panel automatically
  • The disabled prop disables the trigger button and all controls