RYZE Digital Select Replace

Install

npm i @ryze-digital/select-replace

Usage

Scss

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

Use the provided configure mixin to define your select replace defaults. A complete list of all possible configurations can be found in /src/styles/_config.scss.

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

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 ...

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

... or you can use it to only hide <select> fields, if you don't like global classes.

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

JavaScript

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

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

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
• Programmatic control
• Option list appended to custom container