VColorPicker API

Props

name	type	default
`bg-color`	string	undefined
Applies specified color to the control’s background. Used on components that also support the color prop. - supports utility colors with or without `bg-` prefix (for example `success`, `purple` or `bg-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`border`	string \| number \| boolean	false
Applies utility border classes to the component. To use it, you need to omit the `border-` prefix, (for example use `border-sm` as `border="sm"`). Find a list of the built-in border classes on the borders page.
`canvas-height`	string \| number	150
Height of canvas.
`color`	string	undefined
Applies specified color to the control - supports utility colors with or without `text-` prefix (for example `success`, `purple` or `text-purple`) or CSS color (`#033` or `rgba(255, 0, 0, 0.5)`). Find a list of built-in classes on the colors page.
`disabled`	boolean	false
Removes the ability to click or target the component.
`divided`	boolean	false
Adds a divider between the header and controls.
`dot-size`	string \| number	10
Changes the size of the selection dot on the canvas.
`elevation`	string \| number	undefined
Designates an elevation applied to the component between 0 and 5. You can find more information on the elevation page.
`eye-dropper-icon` New in v3.10.0	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$eyeDropper'
Icon used to trigger EyeDropper API.
`height`	string \| number	undefined
Sets the height for the component.
`hide-canvas`	boolean	false
Hides canvas.
`hide-eye-dropper` New in v3.10.0	boolean	false
Hides eyedropper icon.
`hide-header`	boolean	true
Hide the picker header.
`hide-inputs`	boolean	false
Hides inputs.
`hide-sliders`	boolean	false
Hides sliders.
`hide-title` New in v3.10.0	boolean	false
Hide the picker title.
`landscape`	boolean	false
Puts the picker into landscape mode.
`location`	Anchor	undefined
Specifies the component’s location. Can combine by using a space separated string.
`max-height`	string \| number	undefined
Sets the maximum height for the component.
`max-width`	string \| number	undefined
Sets the maximum width for the component.
`min-height`	string \| number	undefined
Sets the minimum height for the component.
`min-width`	string \| number	undefined
Sets the minimum width for the component.
`mode`	'rgb' \| 'rgba' \| 'hsl' \| 'hsla' \| 'hex' \| 'hexa'	'rgba'
The current selected input type. Syncable with `v-model:mode`.
`model-value`	string \| Record<string, unknown>	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`modes`	('rgb' \| 'rgba' \| 'hsl' \| 'hsla' \| 'hex' \| 'hexa')[]	['rgb', 'rgba', 'hsl', 'hsla', 'hex', 'hexa']
Sets available input types.
`position`	'fixed' \| 'relative' \| 'absolute' \| 'static' \| 'sticky'	undefined
Sets the position for the component.
`readonly`	boolean	false
Puts the color picker in a readonly state.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`show-swatches`	boolean	false
Displays color swatches.
`swatches`	( \| string \| number \| { readonly h: number readonly s: number readonly v: number readonly a?: number \| undefined } \| { readonly r: number readonly g: number readonly b: number readonly a?: number \| undefined } \| { readonly h: number readonly s: number readonly l: number readonly a?: number \| undefined } )[][]	undefined
Sets the available color swatches to select from. 2D array of rows and columns, accepts any color format the picker does.
`swatches-max-height`	string \| number	150
Sets the maximum height of the swatches section.
`tag`	string \| (new () => any) \| FunctionalComponent	'div'
Specify a custom tag used on the root element.
`theme`	string	undefined
Specify a theme for this component and all of its children.
`tile`	boolean	false
Removes any applied border-radius from the component.
`title`	string	undefined
Specify a title text for the component.
`width`	string \| number	undefined
Sets the width of the color picker.

Events

name	type
`update:mode`	['rgb' \| 'rgba' \| 'hsl' \| 'hsla' \| 'hex' \| 'hexa']
Selected mode.
`update:modelValue`	[any]
Event that is emitted when the component’s model changes.

SASS Variables

name	default
`$color-picker-border-radius`	4px
`$color-picker-canvas-dot-box-shadow`	0px 0px 0px 1.5px rgba(255, 255, 255, 1), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3)
`$color-picker-canvas-dot-disabled-box-shadow`	0px 0px 0px 1.5px rgba(255, 255, 255, 0.7), inset 0px 0px 1px 1.5px rgba(0, 0, 0, 0.3)
`$color-picker-canvas-dot-size`	15px
`$color-picker-checkerboard`	url(data:image/png
`$color-picker-controls-padding`	16px
`$color-picker-elevation`	1
`$color-picker-input-font-size`	0.75rem
`$color-picker-input-height`	32px
`$color-picker-input-margin`	8px
`$color-picker-input-margin-bottom`	8px
`$color-picker-input-margin-top`	24px
`$color-picker-preview-dot-margin`	24px
`$color-picker-preview-dot-size`	30px
`$color-picker-preview-dropper-margin`	12px
`$color-picker-preview-margin-bottom`	0
`$color-picker-preview-sliders-padding`	8px
`$color-picker-swatch-color-border-radius`	2px
`$color-picker-swatch-color-height`	18px
`$color-picker-swatch-color-margin`	2px 4px
`$color-picker-swatch-color-width`	45px
`$color-picker-swatch-margin-bottom`	10px
`$color-picker-swatches-border-radius`	8px
`$color-picker-width`	300px

#VColorPicker API

VColorPicker API