VField API

Props

name	type	default
`active`	boolean	false
Controls the active state of the item. This is typically used to highlight the component.
`append-inner-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component in the append-inner slot.
`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 \| (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.
`details`	boolean	false
Controls whether the field generates an `aria-describedby` attribute for accessibility.
`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.
`flat`	boolean	false
Removes box shadow when using a variant with elevation.
`focused`	boolean	false
Forces a focused state styling on the component.
`glow` New in v3.8.0	boolean	false
Makes prepend/append icons full opacity when the field is focused and apply color.
`icon-color` New in v3.8.0	string \| boolean	false
Sets the color of the prepend/append icons.
`id`	string	undefined
Sets the DOM id on the component.
`label`	string	undefined
Sets the text of the v-label or v-field-label component.
`label-id`	string	undefined
Sets the DOM id on the inner label element. Useful for associating the label with custom input elements.
`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.
`model-value`	unknown	undefined
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`persistent-clear`	boolean	false
Always show the clearable icon when the input is dirty (By default it only shows on hover).
`prepend-inner-icon`	\| string \| (string \| [string, number])[] \| (new () => any) \| FunctionalComponent	undefined
Creates a v-icon component in the prepend-inner slot.
`reverse`	boolean	false
Reverses the orientation.
`rounded`	string \| number \| boolean	undefined
Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page.
`single-line`	boolean	false
Label does not move on focus/dirty.
`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.
`variant`	\| 'outlined' \| 'plain' \| 'filled' \| 'underlined' \| 'solo' \| 'solo-inverted' \| 'solo-filled'	'filled'
Applies a distinct style to the component.

Events

name	type
`click:appendInner`	[MouseEvent]
Emitted when appended inner icon is clicked.
`click:clear`	[MouseEvent]
Emitted when clearable icon clicked.
`click:prependInner`	[MouseEvent]
Emitted when prepended inner icon is clicked.
`update:focused`	[boolean]
Emitted when the input is focused or blurred
`update:modelValue`	[unknown]
Event that is emitted when the component’s model changes.

Slots

{
  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> }

{
  props: Record<string, unknown> & { class: any }
  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
} & { label: string; props: Record<string, any> }

{ color: string; isActive: boolean }

{
  isActive: Ref<boolean, boolean>
  isFocused: Ref<boolean, boolean>
  iconColor: ComputedRef<string | undefined>
  controlRef: Ref<HTMLElement | undefined, HTMLElement | undefined>
  focus: () => void
  blur: () => void
}

`append-inner`
Slot that is appended to the input.
`clear`
Slot for custom clear icon (displayed when the clearable prop is equal to true).
`default`
The default Vue slot.
`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).
`prepend-inner`
Slot that is prepended to the input.

Exposed

HTMLElement

string

`controlRef`
Reference to the control element of the field.
`fieldIconColor`
The color of the icon.

SASS Variables

name	default
`$field-border-radius`	settings.$border-radius-root
`$field-border-width`	1px
`$field-chip-height`	24px
`$field-clearable-margin`	4px
`$field-clearable-transition`	.15s opacity, .15s width settings.$standard-easing
`$field-color`	tools.theme-color('on-surface', var(--v-medium-emphasis-opacity))
`$field-control-affixed-inner-padding`	6px
`$field-control-affixed-padding`	12px
`$field-control-filled-background`	tools.theme-color('on-surface', var(--v-idle-opacity))
`$field-control-height`	56px
`$field-control-padding-bottom`	4px
`$field-control-padding-end`	16px
`$field-control-padding-start`	16px
`$field-control-padding-top`	8px
`$field-control-solo-background`	rgb(var(--v-theme-surface))
`$field-control-solo-color`	tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
`$field-control-solo-elevation`	1
`$field-control-solo-inverted-color`	tools.theme-color('on-surface', var(--v-high-emphasis-opacity))
`$field-control-solo-inverted-focused-color`	rgb(var(--v-theme-on-surface-variant))
`$field-control-underlined-height`	48px
`$field-control-underlined-padding-bottom`	2px
`$field-disabled-color`	tools.theme-color('on-surface', var(--v-disabled-opacity))
`$field-error-color`	rgb(var(--v-theme-error))
`$field-focused-border-width`	2px
`$field-font-size`	16px
`$field-input-column-gap`	2px
`$field-input-min-height`	#{max( var(--v-input-control-height, $input-control-height), calc($input-font-size * $input-line-height + var(--v-field-input-padding-top) + var(--v-field-input-padding-bottom)) )}
`$field-input-opacity`	var(--v-high-emphasis-opacity)
`$field-input-padding-bottom`	var(--v-field-padding-bottom, $field-control-padding-bottom)
`$field-input-padding-top`	calc(var(--v-field-padding-top, $field-control-padding-top) + var(--v-input-padding-top, 0px))
`$field-input-row-gap`	8px
`$field-label-floating-scale`	.75
`$field-letter-spacing`	.009375em
`$field-max-width`	100%
`$field-outline-opacity`	.38
`$field-overlay-filled-opacity`	0.04
`$field-overlay-focused-background-color`	rgb(var(--v-theme-surface-variant))
`$field-rounded-border-radius`	map.get(settings.$rounded, 'xl')
`$field-subtle-transition-timing`	250ms settings.$standard-easing
`$field-transition-timing`	.15s settings.$standard-easing
`$field-underlined-margin-bottom`	4px

#VField API

VField API