ColorPicker
Pick a color from a palette + custom picker. Supports alpha, presets, and multiple output formats.
Basic usage
With alpha
With presets
API
Props
| Name | Type | Default | Description |
|---|---|---|---|
value | union | "#000000" | — |
label | string | "" | — |
disabled | boolean | false | — |
alpha | boolean | false | — |
presets | Array | () => [] | — |
format | ColorFormat | "hex" | — |
formatOptions | Array | () => ["hex", "rgb", "hsl"] | — |
allowClear | boolean | false | — |
state | DataEntryState | "default" | — |
size | EpSize | undefined | — |
assistiveText | string | "" | — |
alertMessage | string | "" | — |
clearLabel | string | "Clear" | — |
doneLabel | string | "Done" | — |
Events
| Event | Payload | Description |
|---|---|---|
update:value | {"names":["union"],"elements":[{"name":"string"},{"name":"null"}]} | — |
change | {"names":["union"],"elements":[{"name":"string"},{"name":"null"}]} | — |
open | — | — |
close | — | — |
clear | — | — |
Slots
| Slot | Scope | Description |
|---|---|---|
trigger | value, open | — |