Selects

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

Usage

API

Caveats

Examples

Props

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.

v-select/prop-custom-title-and-value.vue

Density

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

v-select/prop-dense.vue

Disabled

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

v-select/prop-disabled.vue

Icons

Use a custom prepended or appended icon.

v-select/prop-icons.vue

Multiple

The multiple prop allows for multiple selections.

v-select/prop-multiple.vue

Chips

Display selected items as chips with the chips prop.

v-select/prop-chips.vue

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.

v-select/slot-append-and-prepend-item.vue

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.

v-select/slot-selection.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.