Simple Color Picker
The basic version of the Color Picker allows users to select a color from a predefined palette.
The swatches attribute sets a color palette from which users can select colors.
It accepts an array of objects with value and label properties: [{"label": "Red", "value": "#ff0000"}, {"value": "#00ff00"}]. The optional label property provides descriptive text for screen readers, improving accessibility.
It is highly recommended to provide a descriptive label attribute for each color swatch, which will be announced by screen readers.
The swatches-per-row attribute controls how many swatches should be displayed in a single row of the color palette's grid.
- Type:
number - Default:
7
The placement attribute sets the default placement of the Simple Color Picker's popup around its anchor element.
- Type:
'top'|'top-start'|'top-end'|'right'|'right-start'|'right-end'|'bottom'|'bottom-start'|'bottom-end'|'left'|'left-start'|'left-end' - Default:
top-start