BlogPlaygroundOne

VColorInput API

ads via vuetify

Props
name
type
default
active
boolean

false

Controls the active state of the item. This is typically used to highlight the component.

append-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Creates a v-icon component after default content in the append slot.

append-inner-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Creates a v-icon component in the append-inner slot.

autocomplete
string

undefined

Helps influence browser’s suggestions. Special value suppress manipulates fields name attribute while off relies on browser’s good will to stop suggesting values. Any other value is passed to the native autocomplete on the underlying element.

autofocus
boolean

false

Enables autofocus.

base-color
string

undefined

Sets the color of the input when it is not focused.

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.

cancel-text
string

'$vuetify.confirmEdit.cancel'

Text for the cancel button

canvas-height
string | number

150

Height of canvas.

center-affix
boolean

undefined

Vertically align appendInner, prependInner, clearIcon and label in the center.

clearable
boolean

false

Allows for the component to be cleared.

clear-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$clear'

The icon used when the clearable prop is set to true.

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.

color-pip
boolean

false

Synchronize pip color with current value

counter
string | number | boolean

false

Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.

counter-value
number | ((value: any) => number)

undefined

Function returns the counter display text.

density
'default' | 'comfortable' | 'compact'

'default'

Adjusts the vertical height used by the component.

dirty
boolean

false

Manually apply the dirty state styling.

disabled
boolean

false

Removes the ability to click or target the input.

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.

error
boolean

false

Puts the input in a manual error state.

error-messages
string | string[]

[]

Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation.

eye-dropper-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

'$eyeDropper'

Icon used to trigger EyeDropper API.

flat
boolean

false

Removes box shadow when using a variant with elevation.

focused
boolean

false

Forces a focused state styling on the component.

glow
boolean

false

Makes prepend/append icons full opacity when the field is focused and apply color.

hide-actions
boolean

false

Prevent showing the default actions buttons. Does not affect <component :is="actions" />

hide-canvas
boolean

false

Hides canvas.

hide-details
boolean | 'auto'

false

Hides hint and validation errors. When set to auto messages will be rendered only if there’s a message (hint, error message, counter value etc) to display.

hide-eye-dropper
boolean

false

Hides eyedropper icon.

hide-header
boolean

true

Hide the picker header.

hide-inputs
boolean

false

Hides inputs.

hide-pip
boolean

false

Hide pip icon

hide-sliders
boolean

false

Hides sliders.

hide-spin-buttons
boolean

false

Hides spin buttons on the input when type is set to number.

hide-title
boolean

false

Hide the picker title.

hint
string

undefined

Displays hint text below the input when focused. Force this always open with the persistent-hint property.

icon-color
string | boolean

false

Sets the color of the prepend/append icons.

id
string

undefined

Sets the DOM id on the component.

indent-details
boolean

null

Adds / removes inline padding in inputs details. Useful when trying to align different variants of fields and selection controls.

label
string

undefined

Sets the text of the v-label or v-field-label component.

landscape
boolean

false

Puts the picker into landscape mode.

loading
string | boolean

false

Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color.

max-errors
string | number

1

Control the maximum number of shown errors from validation.

max-width
string | number

undefined

Sets the maximum width for the component.

menu-props
unknown

undefined

Pass props through to the v-menu component. Accepts an object with anything from v-menu props, camelCase keys are recommended.

messages
string | string[]

[]

Displays a list of messages or a single message if using a string.

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

Represents the committed v-model value

modes
('rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'hexa')[]

['rgb', 'rgba', 'hsl', 'hsla', 'hex', 'hexa']

Sets available input types.

name
string

undefined

Sets the component’s name attribute.

ok-text
string

'$vuetify.confirmEdit.ok'

Text for the ok button

persistent-clear
boolean

false

Always show the clearable icon when the input is dirty (By default it only shows on hover).

persistent-counter
boolean

false

Forces counter to always be visible.

persistent-hint
boolean

false

Forces hint to always be visible.

persistent-placeholder
boolean

false

Forces placeholder to always be visible.

picker-props
unknown

undefined

Pass props through to the picker component. Intended for props that conflict with v-text-field (color, width, rounded, etc.)

pip-icon
string

'$color'

The icon used for pip

pip-location
'prepend' | 'append' | 'prepend-inner' | 'append-inner'

'prepend'

Move pip icon to a different slot

pip-variant
'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain'

'text'

Variant of the pip control

placeholder
string

undefined

Sets the input’s placeholder text.

position
'fixed' | 'static' | 'relative' | 'absolute' | 'sticky'

undefined

Sets the position for the component.

prefix
string

undefined

Displays prefix text.

prepend-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Prepends an icon to the outside the component’s input, uses the same syntax as v-icon.

prepend-inner-icon
  | string
  | (string | [string, number])[]
  | (new () => any)
  | FunctionalComponent

undefined

Creates a v-icon component in the prepend-inner slot.

readonly
boolean

false

Puts the color picker in a readonly state.

reverse
boolean

false

Reverses the orientation.

role
string

undefined

The role attribute applied to the input.

rounded
string | number | boolean

undefined

Adds a border radius to the input.

rules
(
  | string
  | boolean
  | PromiseLike<ValidationResult>
  | ((value: any) => string | false | true)
  | ((value: any) => PromiseLike<ValidationResult>)
  | [string, any, string]
)[]

[]

Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string.

show-swatches
boolean

false

Displays color swatches.

single-line
boolean

false

Label does not move on focus/dirty.

suffix
string

undefined

Displays suffix text.

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.

type
string

'text'

Sets input type.

validate-on
  | 'eager'
  | 'lazy'
  | 'blur'
  | 'input'
  | 'submit'
  | 'invalid-input'
  | 'blur lazy'
  | 'input lazy'
  | 'submit lazy'
  | 'invalid-input lazy'
  | 'blur eager'
  | 'input eager'
  | 'submit eager'
  | 'invalid-input eager'
  | 'lazy blur'
  | 'lazy input'
  | 'lazy submit'
  | 'lazy invalid-input'
  | 'eager blur'
  | 'eager input'
  | 'eager submit'
  | 'eager invalid-input'

undefined

Change what type of event triggers validation to run.

validation-value
any

undefined

The value used when applying validation rules.

variant
  | 'outlined'
  | 'plain'
  | 'filled'
  | 'underlined'
  | 'solo'
  | 'solo-inverted'
  | 'solo-filled'

'filled'

Applies a distinct style to the component.

width
string | number

undefined

Sets the width of the color picker.

Events
name
type
click:append
[MouseEvent]

Emitted when append icon is clicked.

click:appendInner
[MouseEvent]

Emitted when appended inner icon is clicked.

click:clear
[MouseEvent]

Emitted when clearable icon clicked.

click:prepend
[MouseEvent]

Emitted when prepended icon is clicked.

click:prependInner
[MouseEvent]

Emitted when prepended inner icon is clicked.

update:focused
[boolean]

Emitted when the input is focused or blurred

update:modelValue
[string]

Event that is emitted when the component’s model changes.

Slots
{ save: () => void; cancel: () => void; isPristine: boolean }
{ id: ComputedRef<string> messagesId: ComputedRef<string | undefined> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean, boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean, boolean> hasDetails: Ref<boolean, boolean> reset: () => void resetValidation: () => void validate: () => void }
{ isActive: Ref<boolean, boolean> isFocused: Ref<boolean, boolean> iconColor: ComputedRef<string | undefined> controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined> focus: () => void blur: () => void }
{ isActive: Ref<boolean, boolean> isFocused: Ref<boolean, boolean> iconColor: ComputedRef<string | undefined> controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined> focus: () => void blur: () => void } & { props: Record<string, any> }
{ counter: string; max: string | number; value: string | number }
never
{ id: ComputedRef<string> messagesId: ComputedRef<string | undefined> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean, boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean, boolean> hasDetails: Ref<boolean, boolean> reset: () => void resetValidation: () => void validate: () => void }
{ isActive: Ref<boolean, boolean> isFocused: Ref<boolean, boolean> iconColor: ComputedRef<string | undefined> controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined> focus: () => void blur: () => void } & { label: string; props: Record<string, any> }
{ color: string; isActive: boolean }
{ message: string }
{ id: ComputedRef<string> messagesId: ComputedRef<string | undefined> isDirty: ComputedRef<boolean> isDisabled: ComputedRef<boolean> isReadonly: ComputedRef<boolean> isPristine: Ref<boolean, boolean> isValid: ComputedRef<boolean | null> isValidating: Ref<boolean, boolean> hasDetails: Ref<boolean, boolean> reset: () => void resetValidation: () => void validate: () => void }
{ isActive: Ref<boolean, boolean> isFocused: Ref<boolean, boolean> iconColor: ComputedRef<string | undefined> controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined> focus: () => void blur: () => void }
actions

Slot for customizing the content in the actions area

append

Adds an item inside the input and after input content.

append-inner

Slot that is appended to the input.

clear

Slot for custom clear icon (displayed when the clearable prop is equal to true).

counter

Slot for the input’s counter text.

default

The default Vue slot.

details

Slot for custom input details to modifying the display of messages.

label

The default slot of the v-label or v-field-label component.

loader

Slot for custom loader (displayed when loading prop is equal to true).

message

Slot used to customize the message content.

prepend

Adds an item outside the input and before input content.

prepend-inner

Slot that is prepended to the input.