Color Input #
Input component that allows you to select a color.
Examples #
Basic usage #
By default use this component with v-model.
Disabled #
All user interactions can be disabled.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| ariaOpenColorPickerLabel | The aria-label of "open color picker" button. |
|
|
| ariaResetLabel | The aria-label of the "reset" button |
|
|
| autocomplete |
| - | |
| autofocus |
|
| |
| background | The color name of the background color |
| - |
| clearable |
|
| |
| clearableIcon | Sets the cleaning button icon. |
|
|
| clearValue | Component value that will be used as new value when component is cleared |
|
|
| color | Color of the component (theme string or |
|
|
| counter |
|
| |
| dirty | Sets the dirty state of the component |
|
|
| disabled | Applies |
|
|
| error | Show component in error state. |
| - |
| errorCount | Number of error messages displayed. |
|
|
| errorMessages | Error messages for the component. |
| - |
| immediateValidation | Sets the validation to be performed when the component is mounted |
|
|
| indicator | Sets the indicator style. |
|
|
| innerLabel |
|
| |
| inputAriaDescribedby |
| - | |
| inputAriaLabel |
|
| |
| inputAriaLabelledby |
| - | |
| inputClass |
|
| |
| inputmode |
|
| |
| label | Same as native |
|
|
| loading | Indicates that something is loading (spinner icon). |
|
|
| maxLength |
| - | |
| messages | Description messages for the component. |
|
|
| modelValue | The value of the |
|
|
| name | Applies |
| - |
| pattern |
| - | |
| placeholder |
|
| |
| preset | Named preset combination of component props. |
| - |
| readonly | Doesn't look disabled, but acts like one. Mostly useful for wrapper components. |
|
|
| requiredMark | Adds required mark to the label |
|
|
| rules | Validation rules . |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| strictBindInputValue |
|
| |
| success | Show component in success state. |
|
|
| tabindex | Sets the custom |
|
|
| type | Will be used as value for html |
|
|
Events #
| Name | Description |
|---|---|
update:modelValue | The event is triggered when the component needs to change the model. Is also used by |