Components menu
  2. components
  3. forms
  4. color picker

Color picker

The color picker is used to let merchants select a color visually. For example, merchants use the color picker to customize the accent color of the email templates for their shop.

Examples

Use when merchants need to select a color to make the selection a visual task rather than a technical one.

Drag to resize example

Props

allowAlpha
boolean
Allow user to select an alpha value
colorRequired
Color
The currently selected color
id
string
ID for the element
onChangeRequired
(color: HSBAColor) => void
Callback when color is selected

Best practices

  • Use the alpha slider if you want to allow merchants to be able to select a transparent color

Edit source on GitHub · Preview examples in Chromatic