Select

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

Usage


API

v-select

Supplemental

Mask legend
MaskDescription
Masks
#Any digit
AAny capital letter
aAny small letter
NAny capital alphanumeric character
nAny small alphanumeric character
XAny special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space
Pre-made
credit-card#### - #### - #### - ####
date-with-time##/##/#### ##:##
phone(###) ### - ####
social###-##-####
time##:##
time-with-seconds##:##:##

Examples

Light theme

A standard single select has a multitude of configuration options.


Icons

Use a custom prepended or appended icon.


Multiple

A multi-select can utilize v-chip as the display for selected 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.


Prepend/Append item slotsNew in v1.2

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


Change selection apperance

The selection scoped 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.