VSelect API

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` New in v3.10.0	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.
`chips`	boolean	false
Changes display of selections to chips.
`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.
`closable-chips`	boolean	false
Enables the closable prop on all v-chip components.
`close-text`	string	'$vuetify.close'
Text set to the inputs `aria-label` and `title` when input menu is closed.
`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.
`custom-filter`	FilterFunction	undefined
Function used to filter items, called for each filterable key on each item in the list. The first argument is the filterable value from the item, the second is the search term, and the third is the internal item object. The function should return true if the item should be included in the filtered list, or the index of the match in the value if it should be included with the result highlighted.
`custom-key-filter`	unknown	undefined
Function used on specific keys within the item object. `customFilter` is skipped for columns with `customKeyFilter` specified.
`density`	'default' \| 'comfortable' \| 'compact'	'default'
Adjusts the vertical height used by the component.
`disabled`	boolean	null
Removes the ability to click or target the input.
`eager`	boolean	false
Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
`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.
`filter-keys`	string \| string[]	['title']
Array of specific keys to filter on the item.
`filter-mode`	'every' \| 'some' \| 'union' \| 'intersection'	'intersection'
Controls how the results of `customFilter` and `customKeyFilter` are combined. All modes only apply `customFilter` to columns not specified in `customKeyFilter`. some: There is at least one match from either the custom filter or the custom key filter. every: All columns match either the custom filter or the custom key filter. union: There is at least one match from the custom filter, or all columns match the custom key filters. intersection: There is at least one match from the custom filter, and all columns match the custom key filters.
`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-no-data`	boolean	false
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the `items` array changes if not already open.
`hide-selected`	boolean	false
Do not display in the select menu items that are already selected.
`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.
`item-children`	SelectItemKey	false
This property currently has no effect.
`item-color`	string	undefined
Sets color of selected items.
`item-props`	SelectItemKey	'props'
Props object that will be applied to each item component. `true` will treat the original object as raw props and pass it directly to the component.
`items`	any[]	[]
Can be an array of objects or strings. By default objects should have title and value properties, and can optionally have a props property containing any VListItem props. Keys to use for these can be changed with the item-title, item-value, and item-props props.
`item-title`	SelectItemKey	'title'
Property on supplied `items` that contains its title.
`item-type`	SelectItemKey	'type'
Designates the key on the supplied items that is used for determining the nodes type.
`item-value`	SelectItemKey	'value'
Set property of items’s value - must be primitive. Dot notation is supported. Note: This is currently not supported with `v-combobox` GitHub Issue.
`label`	string	undefined
Sets the text of the v-label or v-field-label component.
`list-props` New in v3.5.0	unknown	undefined
Pass props through to the `v-list` component. Accepts an object with anything from v-list props, camelCase keys are recommended.
`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`	boolean	false
Renders with the menu open by default.
`menu-elevation` New in v4.0.0	string \| number	undefined
Sets the elevation of the dropdown menu.
`menu-icon`	\| string \| (new () => any) \| FunctionalComponent \| (string \| [string, number])[]	'$dropdown'
Sets the the spin icon.
`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 of the select’s `v-menu` content.
`model-value`	any	null
The v-model value of the component. If component supports the multiple prop, this defaults to an empty array.
`multiple`	boolean	false
Changes select to multiple. Accepts array for value.
`name`	string	undefined
Sets the component’s name attribute.
`no-auto-scroll` New in v3.9.0	boolean	false
Prevents the select menu to scroll to the selected item automatically.
`no-data-text`	string	'$vuetify.noDataText'
Text shown when no items are provided to the component.
`no-filter`	boolean	false
Disables all item filtering.
`open-on-clear`	boolean	false
When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state.
`open-text`	string	'$vuetify.open'
Text set to the inputs aria-label and title when input menu is open.
`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-object`	boolean	false
Changes the selection behavior to return the object directly rather than the value specified with item-value.
`reverse`	boolean	false
Reverses the orientation.
`role`	string	'combobox'
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`.
`search`	string	undefined
Text input used to filter items.
`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.
`transition`	\| string \| boolean \| (TransitionProps & { component: Component }) \| { component: Component }	{component: {name: 'VDialogTransition'}}
Sets the component transition. Can be one of the built in or custom transition.
`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.
`value-comparator`	(a: any, b: any) => boolean	undefined
Apply a custom comparison algorithm to compare model-value and values contains in the items prop.
`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:menu`	[boolean]
Event that is emitted when the component’s menu state changes.
`update:modelValue`	[any]
Event that is emitted when the component’s model changes.
`update:search`	[string]
Event emitted when the search value 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
}

never

{
  item: unknown
  internalItem: ListItem
  index: number
  props: Record<string, unknown>
}

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

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

{ props: Record<string, unknown>; index: number }

{
  item: unknown
  internalItem: ListItem
  index: number
  props: Record<string, unknown>
}

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

{
  search: Ref<string | undefined, string | undefined>
  filteredItems: ListItem[]
}

{
  search: Ref<string | undefined, string | undefined>
  filteredItems: ListItem[]
}

{ message: string }

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
}

never

{ item: unknown; internalItem: ListItem; index: number }

{ props: Record<string, unknown>; index: number }

`append`
Adds an item inside the input and after input content.
`append-inner`
Slot that is appended to the input.
`append-item`
Adds an item after menu content.
`chip`
Slot for custom chip when using the chip prop.
`clear`
Slot for custom clear icon (displayed when the clearable prop is equal to true).
`details`
Slot for custom input details to modifying the display of messages.
`divider`
Slot for rendering custom dividers. Receives `{ props }` containing divider item data including `value`. Note: dividers do not receive `index` since they are not navigable items.
`item`
Define a custom item appearance. The root element of this slot must be a v-list-item with `v-bind="props"` applied. `props` includes everything required for the default select list behaviour - including title, value, click handlers, virtual scrolling, and anything else that has been added with `item-props`.
`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).
`menu-footer` New in v3.12.0
Defines a footer below the items list.
`menu-header` New in v3.12.0
Defines a header above the items list.
`message`
Slot used to customize the message content.
`no-data`
Defines content for when no items are provided.
`prepend`
Adds an item outside the input and before input content.
`prepend-inner`
Slot that is prepended to the input.
`prepend-item`
Adds an item before menu content.
`selection`
Define a custom selection appearance.
`subheader`
Slot for rendering custom subheaders. Receives `{ props }` containing subheader item data including `title` and `value`. Note: subheaders do not receive `index` since they are not navigable items.

Exposed

HTMLElement

string[]

string

ListItem[]

boolean

boolean

boolean

() => Promise<void>

() => Promise<void>

string

(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.
`filteredItems`
The current array of items based upon the current search text.
`isFocused`
Returns true if the input is focused.
`isValid`
Boolean indicating if the input is valid.
`menu`
Returns true if the menu is currently open.
`reset`
Resets the input value.
`resetValidation`
Resets validation of the input without modifying its value.
`search`
The current search text.
`validate`
Validates the input’s value.

SASS Variables

name	default
`$select-chips-control-min-height`	null
`$select-chips-margin-bottom`	null
`$select-chips-margin-top`	null
`$select-content-border-radius`	4px
`$select-content-elevation`	2
`$select-line-height`	1.75
`$select-transition`	.2s settings.$standard-easing

#VSelect API

VSelect API