ColorPicker

Use this component if you need to select a color.

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});
      }}
    />
  );
}

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);
  },
);

ColorPickerProps

ColorPickerProps

id

ID for the element.

allowAlpha

Allow user to select an alpha value.

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

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.

Related

• Select