Selects

Select fields components are used for collecting user provided information from a list of options.

Usage

API

Caveats

::: error

When using objects for the items prop, you must associate item-title and item-value with existing properties on your objects. These values are defaulted to title and value and can be changed.

:::

Guide

The v-select component is meant to be a direct replacement for a standard <select> element. It is commonly used with v-form and other inputs & controls.

Props

All form inputs have a massive API that make it super easy to configure everything just the way you want it.

Density

You can use density prop to adjust vertical spacing within the component.

Multiple

The multiple prop allows for multiple selections.

Chips

Display selected items as chips with the chips prop.

Readonly

You can use the readonly prop on v-select which will prevent a user from changing its value.

Disabled

Applying the disabled prop to a v-select will prevent a user from interacting with the component.

Custom title and value

You can specify the specific properties within your items array that correspond to the title and value fields. By default, this is title and value. In this example we also use the return-object prop which will return the entire object of the selected item on selection.

When customizing items with the item slot, you should disable the default title prop rendering to avoid duplicate text. You can do this by setting :title="null" on v-list-item.

Menu props

Custom props can be passed directly to v-menu using menu-props prop. In this example a scrim as added to the select and the menu closes when you scroll.

List props

Custom props can be passed directly to v-list using list-props prop. In this example a background color is added to the list.

Custom item props

item-title and item-value are provided for convenience, and additional props can be passed to list items either through the item slot (see below) or with the itemProps prop. Similar to title and value, it has a default value of "props", which will pass everything in the props key of each item object to the list item.

const items = [
  {
    title: 'John',
    props: { subtitle: 'Engineering' },
  },
]

:item-props="true" will use the entire item object as props. This overrides item-title and item-value.

const items = [
  {
    title: 'John',
    subtitle: 'Engineering',
  },
]

Or a custom transform function can be passed to itemProps to generate the props for each item.

See the VListItem API for a list of available props.

Slots

The v-select component offers slots that make it easy to customize the output of certain parts of the component. This includes the prepend and append slots, the selection slot, and the no-data slot.

Item

The item slot is used to change how items are rendered in the list. It provides item, an InternalItem object containing the transformed item-title and item-value; and props, an object containing the props and events that would normally be bound to the list item.

Append and prepend item

The v-select component can be optionally expanded with prepended and appended items. This is perfect for customized select-all functionality.

Selection

The selection slot can be used to customize the way selected values are shown in the input. This is great when you don't want the selection to occupy multiple lines.

Menu header and footer

The menu-header and menu-footer slots allow you to add custom content at the top and bottom of the dropdown menu. This is useful for adding search fields, action buttons, or any other controls.