Skip to content

Component: ColorField

A field for picking a color.

Inheritance

Inherits props from VAutocomplete

typescript
import ColorField from '@nhtio/vuetify-fields/components/fields/color'

Examples

vue
<ColorField />

Result


Reference

Props

NameTypeDefaultRequired
modelValuestring | nullnull
The current color value.
iconstring"mdi-palette"
The icon used to preview the color.
emptyIconstring | undefinedundefined
The optional icon to use instead of the main icon when the value is empty.
clearableViaBadgebooleanfalse
Allows the user to clear the color by clicking on the badge.

Slots

btn-clear
Bindings:
NameTypeDescription
clear () => void Function to clear the currently selected color.
The slot for the clear button.

Events

NameType
update:modelValue
 (val: string | null) => void 
Emitted when the value is changed.
Properties:
NameTypeDescription
string["val"]The current value.
update:model-value
 (val: string | null) => void 
Emitted when the value is changed.
Properties:
NameTypeDescription
string["val"]The current value.
update
 (val: string | null) => void 
Emitted when the value is changed.
Properties:
NameTypeDescription
string["val"]The current value.