Color Choice
<sl-color-choice> | SlColorChoice
Short summary of the component’s intended use.
<sl-color-choice label="Heading colour"></sl-color-choice>
Examples
Changing the default label
<sl-color-choice label="Heading colour" default-label="Default (primary colour)"></sl-color-choice>
Changing the custom label
<sl-color-choice label="Heading colour" custom-label="Choose another colour"></sl-color-choice>
Disabling
If disabled, it just shows the colour picker, in a disabled state.
<sl-color-choice label="Heading colour" disabled></sl-color-choice>
Initial value
<sl-color-choice label="Heading colour" value="#80fe61"></sl-color-choice>
Default colour
The initial colour to show in the colour picker if the control is changed from ‘default’ to ‘custom’
<sl-color-choice label="Heading colour" default-color="#712c2c"></sl-color-choice>
[component-metadata:sl-color-choice]
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
label
|
An example attribute. |
string
|
'Select a colour'
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
sl-input |
|
When the value changes | - |
Learn more about events.
Dependencies
This component automatically imports the following dependencies.
<sl-button><sl-button-group><sl-color-picker><sl-dropdown><sl-icon><sl-input><sl-popup><sl-spinner><sl-visually-hidden>