Select

The Select component is designed for gathering user input from a predefined list of options. This component streamlines the process of data collection.

info

For more details about Vuetify’s usage of Select component, click Select page.
For more prop explanations, click Vuetify Select API page.

Props

Attribute	Description	Type	Default
attach	Specifies which DOM element that this component should detach to.	boolean	false
appendIcon	Appends an icon to the component, uses the same syntax as Icon.	string	undefined
backgroundColor	Changes the background-color of the input	string	undefined
chips	Changes display of selections to chips.	boolean	false
class	llows custom properties to take effect.	string	undefined
compareValue	QLegend is used for comparison values. You can look at the QLegend document	string	undefined
compareText	QLegend is used for comparison values. You can look at the QLegend document	string	undefined
compareTableValue	QLegend is used for comparison values. You can look at the QLegend document	string	undefined
dark	Applies the dark theme.	boolean	false
clearable	Add input clear functionality.	boolean	false
deletableChips	Adds a remove icon to selected chips.	boolean	false
disabled	Disables the input.	boolean	false
eager	Will force the components content to render on mounted. boolean	false
error	Puts the input in a manual error state.	boolean	false
errorMessage	Puts the input in an error state and passes through custom error messages.	string	undefined
hideDetails	Hides hint and validation errors.	boolean-string	undefined
hint	Hint text.	string	undefined
items	Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys.	array	undefined
itemColor	Sets color of selected items	string	primary
itemText	Set property of items’s text value	string-array-function	undefined(text)
itemValue	Set property of items’s value - must be primitive.	string-array-function	undefined(value)
label	Sets input label.	string	undefined
loading	Displays linear progress bar.	boolean	false
menuProps	Pass props through to the menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }".	string - array - object	undefined
multiple	Changes select to multiple. Accepts array for value.	boolean	false
persistentHint	Forces hint to always be visible.	boolean	false
persistentPlaceHolder	Forces placeholder to always be visible.	boolean	false
placeholder	Sets the input’s placeholder text.	string	undefined
prependInnerIcon	Prepends an icon inside the component’s input, uses the same syntax as Icon.	string	undefined
solo	Changes the style of the input.	boolean	false
soloInverted	Reduces element opacity until focused.	boolean	false
success	Puts the input in a manual success state.	boolean	false
successMessage	Puts the input in a success state and passes through custom success messages.	string	undefined
readonly	Puts input in readonly state.	boolean	false
rules	Accepts a mixed array of types function, boolean and string. Functions pass an input value as an argument and must return either true / false or a string containing an error message.	string-array	undefined
tabIndex	Allows component to give and receive focus.	number	undefined
autofocus	Enables autofocus.	boolean	false
value	The input’s value.	number	undefined
visible	Visibility of Select component.	boolean	true

Events

Attribute	Description
update	?
change	Emitted when the input is changed by user interaction

Usage Scenario

• Each item in the array assigned to the items prop of the component should have keys named text and value.
• Assign text to the itemText prop of the component.
• Assign value to the itemValue prop of the component.
• If only one value is to be displayed (no separate fields for text and value), the same value can be assigned to both keys.