Select2
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and pagination (infinite scrolling) of results.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                select2: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<select class="form-select2 w-100" data-placeholder="Pick Option">
    <option></option>
    <option value="opt1">Option1</option>
    <option value="opt2">Option2</option>
</select>
$('.form-select2').select2();
Customize variables at:/library/extend/components/_select2.scss
Component's defaults:/library/components/select2/_defaults.scss
NameDefault valueNote
$dx-select2-input-padding-y.532rem
$dx-select2-input-padding-x.75rem
$dx-select2-input-line-height1.5
$dx-select2-input-border-weight1px
$dx-select2-input-heightadd($dx-select2-input-line-height * 1em, add($dx-select2-input-padding-y * 2, $dx-select2-input-border-weight * 2, false))
$dx-select2-input-border-radius0.25rem
$dx-select2-input-transitionborder-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
$dx-select2-input-font-familynull
$dx-select2-input-font-size$font-size-base
$dx-select2-input-font-weight$font-weight-base
$dx-select2-input-backgroundform-input-bg
$dx-select2-input-border-colorform-input-border
$dx-select2-input-colorform-input-text-color
$dx-select2-input-placeholder-colorform-input-text-color
$dx-select2-input-box-shadownull
$dx-select2-input-arrow-size20
$dx-select2-input-arrow-colortheme.get(default, true, form-input-select-indicator-color)Requires @use "@library/sass/modules/theme";
$dx-select2-input-hover-colorform-input-hover-text-color
$dx-select2-input-focus-colorform-input-focus-text-color
$dx-select2-input-disabled-colorform-input-disabled-text-color
$dx-select2-input-disabled-box-shadownull
$dx-select2-input-open-colorform-input-focus-text-color
$dx-select2-input-open-width.2rem
$dx-select2-tag-spacing-y.25rem
$dx-select2-tag-spacing-x.375rem
$dx-select2-tag-padding-y.25rem
$dx-select2-tag-padding-x.375rem
$dx-select2-tag-font-familynull
$dx-select2-tag-font-size0.875rem
$dx-select2-tag-font-weightnull
$dx-select2-tag-line-height1.5
$dx-select2-tag-border-radius3px
$dx-select2-tag-transition.15s ease-in-out
$dx-select2-remove-btn-size14
$dx-select2-remove-btn-transition.15s ease-in-out
$dx-select2-dropdown-max-height200px
$dx-select2-dropdown-padding-y8px
$dx-select2-dropdown-padding-x8px
$dx-select2-dropdown-border-width0
$dx-select2-dropdown-border-radius4px
$dx-select2-dropdown-edge-spacing.2rem
$dx-select2-dropdown-backgroundpopover-bg
$dx-select2-dropdown-border-colorpopover-divider
$dx-select2-dropdown-box-shadowproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$dx-select2-dropdown-menu-item-padding-y10px
$dx-select2-dropdown-menu-item-padding-x8px
$dx-select2-dropdown-menu-item-line-height1
$dx-select2-dropdown-menu-item-border-radius4px
$dx-select2-dropdown-menu-item-font-sizenull
$dx-select2-dropdown-menu-item-font-weightnull
$dx-select2-dropdown-menu-item-font-familynull
$dx-select2-dropdown-menu-item-colormenu-item-text-color
$dx-select2-dropdown-menu-item-disabled-colormenu-item-disabled-color
$dx-select2-dropdown-search-input-padding-y0.282rem
$dx-select2-dropdown-search-input-padding-x0.75rem
$dx-select2-dropdown-search-input-border-width1px
$dx-select2-dropdown-search-input-border-radius$border-radius-sm
$dx-select2-dropdown-search-input-line-height1.5
$dx-select2-dropdown-search-input-heightadd($dx-select2-dropdown-search-input-line-height * 1em, add($dx-select2-dropdown-search-input-padding-y * 2, $dx-select2-dropdown-search-input-border-width, false))
$dx-select2-dropdown-search-input-font-size$font-size-sm
$dx-select2-dropdown-search-input-font-weightnull
$dx-select2-dropdown-search-input-font-familynull
$dx-select2-dropdown-search-input-colorform-input-text-color

Make sure to read the Customize components and Understanding and using the design system guides.

{title}