GeoMultiSelect Ready 22.1.0+
GeoMultiSelect is a component aimed to allow multiple options selection in
a <select> like UI including chunked load and search capabilities.
Properties
| Prop name | Type | Default value | Description |
|---|---|---|---|
fixedWidth
| boolean |
true
| Show description |
options
| array | Show description | |
keyForLabel
| string |
'label'
| Show description |
placeholder
| string | Show description | |
searchable
| boolean |
false
| Show description |
grouped
| boolean |
false
| Show description |
searchInputPlaceholder
| string | Show description | |
getMatchesForItem
| func | Show description | |
pageSize
| number | Show description | |
dropdownIcon
| array | | Show description |
deleteIcon
| array | | Show description |
searchIcon
| array | | Show description |
forceYAxisPosition
| enumPropertyFactory({
componentName: 'GeoSelect',
propertyName: 'forceYAxisPosition',
enumDictionary: Y_AXIS_POSITION,
required: false,
checkUndefined: true
}) | Show description | |
isValueDeletable
| boolean |
false
| Show description |
disabled
| boolean |
false
| Show description |
variant
| enumPropertyFactory({
componentName: 'GeoSelect',
propertyName: 'variant',
enumDictionary: VARIANTS,
defaultValue: VARIANTS.regular
}) | Show description | |
popupClass
| string|array|object | Show description | |
value
| array | Show description | |
keyForId
| string | Show description | |
pillCloseIcon
| array | | Show description |
visibleSelectedOptionsLimit
| number |
3
| Show description |
Events
| Name | Type | Description |
|---|---|---|
toggle |
undefined
| |
delete-value | User typed on the input box. | |
input |
array
| Change GeoMultiSelect selection event |
Slots
| Name | Description |
|---|---|
toggleButton | Optional. Use this slot to customize toggle button. |
buttonContent | Optional. Use this slot to customize the content rendered inside the button. |
toggleList | Optional. Use this slot to customize the buttons to show more/less pills. |
showLessPills | Use this slot to customize the text to show less pills. |
header | Optional. Use this slot to add a custom header. |
searchHeader | Optional. Use this slot to customize search form. |
group | Optional. Use this slot to customize how groups are displayed
in grouped |
groupTitle | optional. Use this slot to customize titles of opt-groups |
groupItem | optional. Use this slot to customize items of opt-groups |
default | Optional. Use this slot to customize how options are displayed
in non-grouped |
noResults | Use this slot to customize the label that will be displayed when no results are found after searching for an option |
moreResultsTextContent | Use this slot to customize the label of the button allowing to display additional options when there are too many to be displayed at once |
footer | Use this slot to customize the footer of the selection popup |
Constants
This component has no exported constants.