BlogPlaygroundOne

VMaskInput 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
  | (new () => any)
  | FunctionalComponent
  | (string | [string, number])[]

undefined

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

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

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.

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
  | (new () => any)
  | FunctionalComponent
  | (string | [string, number])[]

'$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.

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

null

Removes the ability to click or target the input.

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.

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-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-spin-buttons
boolean

false

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

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.

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.

mask
  | string
  | {
      mask: string
      tokens: Record<
        string,
        | { convert: (char: string) => string }
        | { pattern: undefined; test: (char: string) => boolean }
        | { pattern: RegExp; test: undefined }
      >
    }

undefined

Apply a mask to the input. See guide for more information.

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.

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.

model-value
any

undefined

The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.

name
string

undefined

Sets the component’s name attribute.

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.

placeholder
string

undefined

Sets the input’s placeholder text.

prefix
string

undefined

Displays prefix text.

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

undefined

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

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

undefined

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

readonly
boolean

null

Puts input in readonly state.

return-masked-value
boolean

false

Returns the unmodified masked string.

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.

single-line
boolean

false

Label does not move on focus/dirty.

suffix
string

undefined

Displays suffix text.

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.

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'
  | 'underlined'
  | 'filled'
  | 'solo'
  | 'solo-inverted'
  | 'solo-filled'

'filled'

Applies a distinct style to the component.

width
string | number

undefined

Sets the width for the component.

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
{ 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 }
{ id: Readonly<Ref<string, 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 } & { 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 }
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.

Exposed
HTMLElement
string[]
string
boolean
() => Promise<void>
() => Promise<void>
(silent: boolean) => Promise<string[]>
controlRef

Reference to the control element of the field.

errorMessages

An array of error messages that were set by the setErrors method.

fieldIconColor

The color of the icon.

isValid

Boolean indicating if the input is valid.

reset

Resets the input value.

resetValidation

Resets validation of the input without modifying its value.

validate

Validates the input’s value.