RYZE Digital Select Replace

Install

npm i @ryze-digital/select-replace --save

Usage

Scss

@use "@ryze-digital/select-replace";

Use the provided configure mixin to define your select replace defaults.

@include select-replace.configure(...);

| Option | Type | Default | Description | |--------------------------------|--------|-----------|------------------------------------------------------------------------| | fake-select | Map | | Configuration options especially for the fake select (not option list) | | fake-select.padding-inline-end | Number | 40px | Area where in which the arrow down icon is centered in | | fake-select.icon | Map | | The arrow down icon (aka select box indicator) | | fake-select.icon.color | Color | #cccccc | | | fake-select.icon.size | Number | 9px | |

Check out the actual configure mixin for better understanding.

There are seperate mixins for the replaced select and the option list.

.select-replace {
    @include select-replace.fake-select();
}

.option-list {
    @include select-replace.option-list();
}

For accessibility reasons we do not simply hide the original <select> field, because it should remain focusable. Therefore, our JavaScript adds a class called visually-hidden to it after it is initialized. To visually hide elements that should still be usable by screen readers, we have a mixin in our scss-utilities called visually-hidden. You could either use it to create a utility class with it, to separately hide only selected <select> fields ...

.visually-hidden {
    @include scss-utilities.visually-hidden();
}

... or you can use it to only hide all <select> field directly, if you plan to replace them all.

select {
    @include scss-utilities.visually-hidden();
}

JavaScript

import { SelectReplace } from '@ryze-digital/select-replace';

new SelectReplace({...}).init();

| Option | Type | Default | Description | |----------------------|-------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------| | el | HTMLElement | document.querySelector('select') | Container to which the library should be bound | | optionList | object | | Configuration options especially for the option list | | optionList.calcWidth | boolean | true | Make option list the same width as select field | | optionList.appendTo | HTMLElement | document.body | Container in which the option list get appended | | classes | object | {  fakeSelect: 'select-replace',  placeholder: 'placeholder',  optionList: 'option-list',  hideSelect: 'visually-hidden',  focussed: 'has-focus'} | Selectors that are used internally or states that will be added to elements | | i18n | object | | Internationalization settings | | i18n.languages | array | ['en', 'de'] | Available translations (extend this array, if you provide more) | | i18n.selectedOptions | object | {  en: 'selected',  de: 'ausgewählt'} | Translations for n selected | | i18n.use | string | en | Fallback language to use, if document language is not available in i18n.languages |

Public methods

The folloing methods can be called on an instance of SelectReplace:

Calling the constructor just creates a new instance of SelectReplace and does not replace the <select> field. You need to call init() to initiate the needed DOM modifications. This method does not have any parameters yet.

After doing some modifications to the <select> field, you have to call update() to reflect these changes to the fake select. This method does not have any parameters yet.

You can manually call reposition() to recalculate and update the positions of the fake dropdown list. This method does not have any parameters yet.

Demos

Checkout this repository and use the /demos folder as document root to see a running demo in the browser.

• Single select
• Multiple select
• Multiple select fields
• Preselected options
• Disabled select and options
• Programmatic control
• Form reset
• Option list appended to custom container