Choose a version:

ColorPicker

Use this component if you need to select a color.

Anchor to colorpickerpropsColorPickerProps

Anchor to allowAlpha allowAlpha boolean Default: false: Allow user to select an alpha value.
Anchor to id id string: ID for the element.
Anchor to onChange onChange (value: string) => void: The onChange handler will emit the value in hex. If the allowAlpha prop is true, onChange will emit an 8-value hex (#RRGGBBAA). If the allowAlpha prop is false, onChange will emit a 6-value hex (#RRGGBB).
Anchor to value value string: The currently selected color.

Supported formats include:

RGB @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

RGBA @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb

Hex (3-value, 4-value, 6-value, 8-value) @see https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color

For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.

ColorPickerProps

allowAlpha
Allow user to select an alpha value.
```
boolean
```
id
ID for the element.
```
string
```
onChange
The `onChange` handler will emit the value in hex. If the `allowAlpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA). If the `allowAlpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
```
(value: string) => void
```
value
The currently selected color. Supported formats include: - RGB @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb - RGBA @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb - Hex (3-value, 4-value, 6-value, 8-value) @see https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.
```
string
```

export interface ColorPickerProps {
  /** ID for the element. */
  id?: string;

  /**
   * Allow user to select an alpha value.
   * @default false
   */
  allowAlpha?: boolean;

  /**
   * The `onChange` handler will emit the value in hex.
   * If the `allowAlpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA).
   * If the `allowAlpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
   */
  onChange?(value: string): void;

  /**
   * The currently selected color.
   *
   * Supported formats include:
   * - RGB @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
   * - RGBA @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
   * - Hex (3-value, 4-value, 6-value, 8-value) @see https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
   *
   * For RGB and RGBA, both the legacy syntax (comma-separated) and modern syntax (space-separate) are supported.
   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb
   *
   * If the value is invalid, the component will select rgb(0, 0, 0).
   *
   * The `onChange` handler will emit the value in hex.
   * If the `allowAlpha` prop is `true`, `onChange` will emit an 8-value hex (#RRGGBBAA).
   * If the `allowAlpha` prop is `false`, `onChange` will emit a 6-value hex (#RRGGBB).
   */
  value?: string;
}

Was this section helpful?

Simple ColorPicker example

import {

render,

ColorPicker,

} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {

return (

<ColorPicker

value="rgba(255 0 0 / 0.5)"

onChange={(value) => {

console.log({value});

}}

);

}

examples

Simple ColorPicker example

React

import {
  render,
  ColorPicker,
} from '@shopify/ui-extensions-react/admin';

render('Playground', () => <App />);

function App() {
  return (
    <ColorPicker
      value="rgba(255 0 0 / 0.5)"
      onChange={(value) => {
        console.log({value});
      }}
    />
  );
}

JS

import {
  extension,
  ColorPicker,
} from '@shopify/ui-extensions/admin';

export default extension(
  'Playground',
  (root) => {
    const blockStack = root.createComponent(
      ColorPicker,
      {
        value: "rgba(255 0 0 / 0.5)",
        label: ""
      },
    );

    root.appendChild(blockStack);
  },
);

Preview

Anchor to relatedRelated

Select