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(...);

List of available configuration options

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();

List of available constructor parameters

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:

init()

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.

update()

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.

reposition()

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