ColorPicker

ColorPicker is a color selector supporting multiple color formats.

TIP

This component requires the <client-only></client-only> wrap when used in SSR (eg: Nuxt) and SSG (eg: VitePress).

Basic usage

Alpha

Predefined colors

Sizes

API

Attributes

Name	Description	Type	Default
model-value / v-model	binding value	`string`	—
disabled	whether to disable the ColorPicker	`boolean`	false
size	size of ColorPicker	`enum`	—
show-alpha	whether to display the alpha slider	`boolean`	false
color-format	color format of v-model	`enum`	—
popper-class	custom class name for ColorPicker's dropdown	`string`	—
predefine	predefined color options	`object`	—
validate-event	whether to trigger form validation	`boolean`	true
tabindex	ColorPicker tabindex	`string` / `number`	0
label a11y deprecated	ColorPicker aria-label	`string`	—
aria-label a11y 2.7.2	ColorPicker aria-label	`string`	—
id	ColorPicker id	`string`	—
teleported 2.7.2	whether color-picker popper is teleported to the body	`boolean`	true

Events

Name	Description	Type
change	triggers when input value changes	`Function`
active-change	triggers when the current active color changes	`Function`
focus 2.4.0	triggers when Component focuses	`Function`
blur 2.4.0	triggers when Component blurs	`Function`

Exposes

Name	Description	Type
color	current color object	`object`
show 2.3.3	manually show ColorPicker	`Function`
hide 2.3.3	manually hide ColorPicker	`Function`
focus 2.3.13	focus the picker element	`Function`
blur 2.3.13	blur the picker element	`Function`

Source

Component • Docs

Contributors