Epicmax - We are the core team behind Vuestic UI and Vuestic Admin and frontend development company specializing in Vue.js since our founding in 2017.
🔥🔥🔥 Hire us

Color Input
#

Input component that allows you to select a color.

Examples
#

Basic usage
#

By default use this component with v-model.

Open in GitHub

Disabled
#

All user interactions can be disabled.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
ariaOpenColorPickerLabel

The aria-label of "open color picker" button.

String

"$t:openColorPicker"

ariaResetLabel

The aria-label of the "reset" button

String

"$t:reset"

autocomplete

String

-

autofocus

Boolean

false

background

The color name of the background color

String

-

clearable

Boolean

false

clearableIcon

Sets the cleaning button icon.

String

"va-clear"

clearValue

Component value that will be used as new value when component is cleared

String

""

color

Color of the component (theme string or HEX string).

String

"primary"

counter

Boolean

false

dirty

Sets the dirty state of the component

Boolean

false

disabled

Applies disabled style and removes all user interaction effects.

Boolean

false

error

Show component in error state.

Boolean

-

errorCount

Number of error messages displayed.

String | Number

1

errorMessages

Error messages for the component.

Array | String

-

immediateValidation

Sets the validation to be performed when the component is mounted

Boolean

false

indicator

Sets the indicator style.

String

"dot"

innerLabel

Boolean

false

inputAriaDescribedby

String

-

inputAriaLabel

String

"$t:inputField"

inputAriaLabelledby

String

-

inputClass

String

""

inputmode

String

"text"

label

Same as native label.

String

""

loading

Indicates that something is loading (spinner icon).

Boolean

false

maxLength

Number | String

-

messages

Description messages for the component.

Array | String

[]

modelValue

The value of the v-model bindings.

String

null

name

Applies name to internal input component. Useful for native forms.

String

-

pattern

String

-

placeholder

String

""

preset

Named preset combination of component props.

String | Array

-

readonly

Doesn't look disabled, but acts like one. Mostly useful for wrapper components.

Boolean

false

requiredMark

Adds required mark to the label

Boolean

false

rules

Validation rules .

Array

[]

stateful

Add possibility to work with component without setting v-model.

Boolean

false

strictBindInputValue

Boolean

false

success

Show component in success state.

Boolean

false

tabindex

Sets the custom tabindex.

String | Number

0

type

Will be used as value for html type attribute.

String

"text"

Events #

NameDescription

update:modelValue

The event is triggered when the component needs to change the model. Is also used by v-model and must be listed after the v-model