Combobox
Combobox info coming soon
Usage
With Combobox, you can allow a user to create new values that may not be present in a provided items list.
API
Allow the menu to overflow off the screen
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.
When searching, will always highlight the first option
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
Disable 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
The filtering algorithm used when searching. example
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
Hides the menu when there are no options to show. Useful for preventing the menu from opening before results are fetched asynchronously. Also has the effect of opening the menu when the items
array changes if not already open.
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
Do not apply filtering when searching. Useful when data is being filtered server side
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
Use the .sync modifier to catch user input from the search input
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
Apply a custom value comparator function
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
No data with chips
In this example we utilize a custom no-data slot to provide context to the user when searching / creating items.
Advanced custom options
The v-combobox
improves upon the added functionality from v-select
and v-autocomplete
. This provides you with an expansive interface to create truly customized implementations. This example takes advantage of some more advanced features such as a custom filter algorithm, inline list editing and dynamic input items.
Multiple combobox
Previously known as tags - user is allowed to enter more than 1 value