Select
Select fields components are used for collecting user provided information from a list of options.
API
Appends an icon to the component, uses the same syntax as v-icon
Appends an icon to the outside the component's input, uses same syntax as v-icon
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
Enables autofocus
Changes the background-color of the input
Applies the alternate box input style
Configures the default <input> autocomplete attribute
Keeps a local unique copy of all items that have been passed through the items prop.
Changes display of selections to chips
Applied when using clearable and the input is dirty
Add input clear functionality, default icon is Material Icons clear
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation.
Applies the dark theme variant
Adds a remove icon to selected chips
Lowers max height of list items
Disables the input
Disables the automatic character display when typing
Puts the input in a manual error state
The total number of errors that should display at once
Puts the input in an error state and passes through custom error messages. Will be combined with any validations that occur from the rules prop. This field will not trigger validation
Removes elevation (shadow) added to element when using the solo or solo-inverted props
Designates input type as full-width
Sets the component height
Hides hint, validation errors
Do not display in the select menu items that are already selected
Hint text
Set property of items's avatar value
Set property of items's disabled value
Set property of items's text value
Set property of items's value - must be primative. Dot notation is supported
Can be an array of objects or array of strings. When using objects, will look for a text and value field. This can be changed using the item-text and item-value props.
Sets input label
Applies the light theme variant
Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it's supported by the component) or the primary color
Apply a custom character mask to the input. See mask table below for more information
Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"
Displays a list of messages or message if using a string
Changes select to multiple. Accepts array for value
Display text when there is no data
When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
Applies the outline style to the input
Forces hint to always be visible
Sets the input’s placeholder text
Displays prefix text
Prepends an icon to the component, uses the same syntax as v-icon
Prepends an icon inside the component's input, uses the same syntax as v-icon
Puts input in readonly state
Returns the unmodified masked string
Changes the selection behavior to return the object directly rather than the value specified with item-value
Reverses the input orientation
Accepts an array of functions that return either True or a String with an error message
Label does not move on focus/dirty
Changes display of selections to chips with the small property
Changes the style of the input
Reduces element opacity until focused
Puts the input in a manual success state
Puts the input in a success state and passes through custom success messages.
Displays suffix text
Sets input type
Delays validation until blur event
Input value
The comparison algorithm used for values. More info
Supplemental
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any 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 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 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.