# Selects

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

# Usage

# API

v-select

# Caveats

Browser autocomplete is set to off by default, may vary by browser and may be ignored. MDN

The auto property of menu-props is only supported for the default input style.

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

# Examples

# Props

# Custom text and value

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

# Dense

You can use dense prop to reduce the field height and lower max height of list items.

# Disabled

You cannot use disabled v-select.

# Icons

Use a custom prepended or appended icon.

# Light

A standard single select has a multitude of configuration options.

# Multiple

A multi-select can utilize v-chip as the display for selected items.

# Readonly

You cannot use read-only v-select, but it looks default.

# Slots

# Append and prepend item

The v-select components 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 want something like foo (+20 others) or don’t want the selection to occupy multiple lines.