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
fullWidth
boolean
Allow HuePicker to take the full width
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