GeoSelect Ready 4.1.0+

GeoSelect is a replacement for plain HTML <select> tags aimed to offer a better UX, 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
function () {
  return ['fal', 'chevron-down']
}
Show description
deleteIcon array
function () {
  return ['fas', 'times-circle']
}
Show description
searchIcon array
function () {
  return ['fal', 'search']
}
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 object Show description

Events

Name Type Description
toggle undefined
delete-value User typed on the input box.
input object Change GeoSelect selection event

Slots

Name Description
toggleButton

Optional. Use this slot to customize toggle button.

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 GeoSelects

group-title
group-item
default

Optional. Use this slot to customize how options are displayed in non-grouped GeoSelects

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

Use this slot to customize the footer of the selection popup

Constants

This component has no exported constants.

Examples

Simple select

Searchable select

Select with opt-groups

Paginated select

Select with marquee options

Select with opt-groups and marquee options

Disabled select

Custom select