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

Go to api

Examples

A standard single select has a multitude of configuration options.

Selects also support theming, dark and light.

Use a custom prepended or appended icon.

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

Provides type-ahead autocomplete functionality.

With the power of scoped slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items.

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.

With tags you can allow a user to create new values that may not be present in a provided items list. Keep in mind, tags only supports arrays of primitive items and cannot be used with props such as item-text, item-value for example.

Combobox is the single select variant of tags

Sometimes you need to load data externally based upon a search query. Use the search-input prop with the .sync modifier when using the autocomplete prop. We also make use of the new cache-items prop. This will keep a unique list of all items that have been passed to the items prop and is REQUIRED when using asynchronous items and the multiple prop.

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##:##:##

API