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




You cannot use disabled v-select.


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

Light theme

A standard single select has a multitude of configuration options.


Use a custom prepended or appended icon.


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


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

Customized item 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.

Custom menu props

Custom props can be passed directly to v-menu using menuProps prop. In this example menu is force directed to top and shifted to top.

Prepend/Append item slots

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

Change selection appearance

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.

Edit this page on Github | Translate on Crowdin
StoreFor Enterprise