Combobox
The Combobox component is a Autocomplete that allows the user to enter values that do not exist within the provided items.
info
Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| allowOverflow | Allow the menu to overflow off the screen. | boolean | true |
| appendIcon | Appends an icon to the component, uses the same syntax as Icon. | string | '$dropdown' |
| attach | Specifies which DOM element that this component should detach to. | any | false |
| autofocus | Enables autofocus. | boolean | false |
| autoSelectFirst | When searching, will always highlight the first option. | boolean | false |
| avoidClearableTabIndex | |||
| backgroundColor | Changes the background-color of the input. | string | undefined |
| cacheItems | Keeps a local unique copy of all items that have been passed through the items prop. | boolean | false |
| chips | Changes display of selections to chips. | boolean | false |
| 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 |
| class | Allows custom properties to take effect. | string | undefined |
| clearIcon | Applied when using clearable and the input is dirty. | string | '$clear' |
| clearable | Add input clear functionality, default icon is Material Design Icons mdi-clear. | boolean | false |
| counter | Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | function | null |
| counterValue | Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | boolean - string - number | undefined |
| dark | Applies the dark theme variant to the component. | boolean | false |
| deletableChips | Adds a remove icon to selected chips. | boolean | false |
| delimiters | Accepts an array of strings that will trigger a new tag when typing. Does not replace the normal Tab and Enter keys. | array | [] |
| dense | Reduces the input height. | boolean | false |
| disabled | Disable 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 |
| errorCount | The total number of errors that should display at once. | number | string | 1 |
| errorMessages | 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. | string | array | [] |
| format | Allows us to add format to this property. | string|number | undefined |
| formatValues | It allows us to determine the limits and conditions of the format we add. | string|number | undefined |
| filter | The filtering algorithm used when searching. | function | (item, queryText, itemText) => {} |
| hideDetails | Hides hint and validation errors. | boolean | string | undefined |
| hideNoData | Hides the menu when there are no options to show. | boolean | false |
| hideSelected | Do not display in the select menu items that are already selected. | boolean | false |
| hint | Hint text | string | undefined |
| itemColor | Sets color of selected items. | string | 'primary' |
| itemDisabled | Set property of items’s disabled value. | string | array | function | disabled |
| itemText | Set property of items’s disabled value. | string | array | function | text |
| itemValue | Set property of items’s value - must be primitive. | string | array | function | value |
| items | Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. | array | [] |
| label | Sets input label. | string | undefined |
| loading | Displays linear progress bar. | boolean | string | 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 | { closeOnClick: false, closeOnContentClick: false, disableKeys: true, openOnClick: false, maxHeight: 304 }. |
| multiple | Changes select to multiple. Accepts array for value. | boolean | false |
| noDataText | Display text when there is no data. | string | '$vuetify.noDataText' |
| noFilter | Do not apply filtering when searching. Useful when data is being filtered server side. | boolean | false |
| openOnClear | When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state. | boolean | false |
| outlined | Applies the outlined style to the input. | 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 |
| prefix | Displays prefix text. | string | undefined |
| prependInnerIcon | Prepends an icon inside the component’s input, uses the same syntax as Icon. | string | undefined |
| preventPaste | Prevents copy-pasting of data. | 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. The input field will enter an error state if a function returns (or any value in the array contains) false or is a string. | array | [] |
| searchInput | Search value. Can be used with .sync modifier. | string | undefined |
| singleLine | Label does not move on focus/dirty. | boolean | false |
| smallChips | Changes display of selections to chips with the small property. | boolean | false |
| solo | Changes the style of the input. | boolean | false |
| soloInverted | Reduces element opacity until focused. | boolean | false |
| step | It makes the step-by-step separation of the component according to what is added to the type proup. | number | unfedined |
| success | Puts the input in a manual success state. | boolean | false |
| successMessages | Puts the input in a success state and passes through custom success messages. | string | array | [] |
| suffix | Displays suffix text. | string | undefined |
| type | Sets input type. | string | 'text' |
| validateOnBlur | Delays validation until blur event. | boolean | false |
| tabindex | It determines the order of switching from one component to another with the tab key. | string | |
| value | Value can be entered. | string | undefined |
| visible | Visibility of Combobox component. | boolean | true |
Events
| Attribute | Description |
|---|---|
| change | Emitted when the input is changed by user interaction |
| blur | Emitted when the input is blurred |
| input | The updated bound model |
| keydown | Emitted when any key is pressed |
| click | Emitted when input is clicked |
| pdate:search-input The search-input.sync event |
Mobile Usage
Use VSelect or VAutocomplete on mobile.
Samples Component
Samples Qjson
comboboxComboboxDefaultSelection
comboboxSelected
ComboboxWithTreeView
SelectAll_Combobox
ComboboxAddItemWithDialog
ComboboxAddItemWithTextField
ResetCombobox