Color Select
<zn-color-select> | ZnColorSelect
A simple color picker. The dropdown lists color swatches with names; the closed control shows only the selected color’s swatch.
<zn-color-select label="Color" name="color"></zn-color-select>
Examples
With a Default Value
Set the selected color with the value attribute (lowercase color name).
<zn-color-select label="Color" name="color" value="blue"></zn-color-select>
Clearable
Add the clearable attribute to show a clear button when a color is selected.
<zn-color-select label="Color" name="color" value="green" clearable></zn-color-select>
Help Text
<zn-color-select label="Color" name="color" help-text="Pick a color for the label."></zn-color-select>
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.50/dist/components/color-select/color-select.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.50/dist/components/color-select/color-select.js';
To import this component using a bundler:
import '@kubex/zinc/dist/components/color-select/color-select.js';
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
name
|
The name of the select. Used for form submission. |
string
|
- | |
value
|
The selected color (lowercase name, e.g. “red”). Used for form submission. |
string
|
''
|
|
label
|
The select’s label. |
string
|
''
|
|
helpText
help-text
|
The select’s help text. |
string
|
''
|
|
disabled
|
Disables the select. |
|
boolean
|
false
|
required
|
Makes the select a required field. |
|
boolean
|
false
|
clearable
|
Shows a clear button when a color is selected. |
boolean
|
false
|
|
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 |
|---|---|---|---|
zn-input |
|
Emitted when the selected color changes. | - |
zn-clear |
|
Emitted when the clear button is activated. | - |
Learn more about events.
Parts
| Name | Description |
|---|---|
swatch |
The color swatch shown in the closed control. |
combobox |
The container that wraps the swatch and expand button (forwarded from zn-select). |
form-control-help-text |
The help text’s wrapper (forwarded from zn-select). |
form-control-input |
The select’s wrapper (forwarded from zn-select). |
Learn more about customizing CSS parts.
Dependencies
This component automatically imports the following dependencies.
<zn-example><zn-icon><zn-opt-group><zn-option><zn-popup><zn-select><zn-tag>