Color
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.
string
ID for the element.
Anchor to onChange
onChange
(value: string) => void
The handler will emit the value in hex. If the prop is true, will emit an 8-value hex (#RRGGBBAA). If the prop is false, 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.
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});
}}
/>
);
}
Preview
