Select
Display all possible options in one component with ability select one or multiple values.
List of features:
- Typeahead value filter
- Child content override via slots
- Tags as selection items
- Async data process
| Name | Type | Options | Default | Description |
|---|---|---|---|---|
| allowEmpty | boolean | true | Specify if no option can be selected | |
| autocomplete | string | 'off' | Specify autocomplete value | |
| blockKeys | string[] | function() { return []; } | List of keys where default behavior will be ignored | |
| clearOnSelect | boolean | true | Specify if on select the search input should be cleaned up | |
| closeOnSelect | boolean | true | Specify if the popper should be closed after selection | |
| customLabel | CustomlabelFn | function(option, label) { if (isEmpty(option)) { return ''; } return typeof option === 'object' && option[label] ? option[label] : option; } | If the option is an object specify what property should be used as a label, by default 'label' | |
| validate | ValidationState | null | Specify how to validate the select field | |
| showValidateMessages | boolean | false | Show validation messages | |
| disabled | boolean | false | Disable the select field | |
| helpText | string | null | Change the help text | |
| hideSelected | boolean | false | Specify if selected options should be hidden | |
| id | string | () => nanoid() | ID of select field | |
| internalSearch | boolean | true | Specify is the internal search enabled | |
| label | string | '' | Change the label of the select field | |
| limit | number | 99999 | Specify the limit quantity of shown selected options | |
| limitText | func | getLimitText | Set the text which is shown when there are not shown options by limit | |
| loading | boolean | false | Set the loading state | |
| max | number | boolean | false | Specify maximum for selected options | |
| maxHeight | number | 300 | Specify max height of the popper | |
| multiple | boolean | false | Specify is multiple mode is enabled | |
| name | string | '' | Change the name of select | |
| openDirection | string | 'above', 'top', 'below', 'bottom' | '' | Specify direction of shown popper |
| options | Options | () => [] | Set the options of select field | |
| optionHeight | number | 40 | Specify height of options in the popper | |
| optionKey | string | '' | If the option is an object specify what property should be used as a value, by default 'value' | |
| optionLabel | string | '' | If the option is an object specify what property should be used as a label, by default 'label' | |
| optionsLimit | number | 1000 | Set the limit of available shown options | |
| preselectFirst | boolean | false | Specify if the first option should be preselected | |
| preserveSearch | boolean | false | Specify if the search should be preserved | |
| placeholder | string | 'Select option' | Change the placeholder | |
| resetAfter | boolean | false | Specify if the selection should be reset | |
| searchable | boolean | true | Specify if the field searchable | |
| showNoOptions | boolean | true | Specify if the no option label should be shown | |
| showNoResults | boolean | true | Specify if the no results label should be shown | |
| showPointer | boolean | true | Specify should the pointer be shown | |
| tabindex | number | 0 | Specify tab index | |
| taggable | boolean | false | Specify should the user create his own options - tags | |
| tagPosition | string | 'top' | Specify tag position | |
| tagValidator | TagValidatorFn | () => true | Specify how the tag is validating | |
| modelValue | Nullable<Options | OptionItem> | function() { return []; } | The array of selected options | |
| asyncFind | AsyncSearchFn | null | ||
| asyncConfig | Config | () => ({}) | ||
| asyncValuePropsKey | string | '' | ||
| trackAsyncUpdatesByObject | boolean | false | Used to receive object in update:modelValue event, but not just the option key |
| Name | Description |
|---|---|
| remove | Override default remove icon |
| caret | Override default caret component |
| clear | Add an icon to clear the input |
| selection | Override default selection component |
| tag | Override default tag component |
| limit | Override default limit message component |
| loading | Override default loading spinner component |
| singleLabel | Override default single value component |
| placeholder | Override default placeholder component |
| beforeList | Override default before list option component |
| maxElements | Override default max elements message component |
| option | Override default option component |
| noResult | Override default no result component |
| noOptions | Override default no options component |
| afterList | Override default after list component |
| Name | Description |
|---|---|
| update:modelValue | The option select |
| search-change | Search text change |
| open | The select popper open |
| close | The select popper close |
| remove | The selected option remove |
| tag | The option tag |
| async-loaded | |
| select | The option select |