Selects
Select fields components are used for collecting user provided information from a list of options.
Usage
API
| Component | Description |
|---|---|
| v-select | The select component. |
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-title and item-value with existing properties on your objects. These values are defaulted to title and value and can be changed.
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.
Density
You can use density prop to reduce the field height and lower max height of list items.
Disabled
Applying the disabled prop to a v-select will prevent a user from interacting with the component.
Icons
Use a custom prepended or appended icon.
Multiple
The multiple prop allows for multiple selections.
Chips
Display selected items as chips with the chips prop.
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 don’t want the selection to occupy multiple lines.