Color Picker
A color picker integrates a swatch with a configurable popover for color editing.
Example
Value
A color area requires either a default or controlled value. Use the default_value prop to set the initial state (uncontrolled) or the value prop to control the current state.
Labeling
A visual label can be provided using the label prop. If a visible label isn’t specified, an aria_label prop should be provided for accessibility.
Events
Color pickers accept an on_change prop which triggers when the value is edited.
Visual Options
The appearance of the color picker can be customized using various visual options such as hiding the alpha channel, adjusting rounding, and changing the size.
Hide alpha channel
Rounding
Size
Table Formatting
API reference
A ColorPicker combines a swatch with a customizable popover for editing a color.
Returns: Element The rendered color picker.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | Any | Elements to render in the color picker. | |
| label | Any | None | The label for the color picker. |
| size | str | 'M' | The size of the color picker. |
| rounding | str | 'default' | The rounding of the color picker. |
| value | str | None | None | The current value of the color picker. |
| default_value | str | None | None | The default value of the color picker. |
| hide_alpha_channel | bool | None | None | Whether to hide the alpha channel in the color picker. |