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

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring
disabledwhether to disable the ColorPickerbooleanfalse
sizesize of ColorPickerenum
show-alphawhether to display the alpha sliderbooleanfalse
color-formatcolor format of v-modelenum
popper-classcustom class name for ColorPicker's dropdownstring
predefinepredefined color optionsobject
validate-eventwhether to trigger form validationbooleantrue
tabindexColorPicker tabindexstring / number0
labela11yColorPicker aria-labelstring
idColorPicker idstring

Events

NameDescriptionType
changetriggers when input value changesFunction
active-changetriggers when the current active color changesFunction

Exposes

NameDescriptionType
colorcurrent color objectobject
show 2.3.3manually show ColorPickerFunction
hide 2.3.3manually hide ColorPickerFunction

Source

ComponentDocs

Contributors