Pretty Accessible Custom Select Box Library – EasyDropDown

Preview:

Description:

EasyDropDown is a lightweight JavaScript library that enhances the native <select> element into a customizable, accessible, themeable dropdown component.

It maintains the functionality and accessibility of a standard <select> element but exposes a semantic DOM structure you can style to match your brand.

In addition, it supports keyboard interaction, emits native change events, and falls back to the default <select> UI on mobile devices.

How to use it:

1. Install and import the EasyDropDown component.

# Yarn
$ yarn add easydropdown
# NPM
$ npm i easydropdown

// ES Modules
import easydropdown from 'easydropdown';
// CommonJS
const easydropdown = require('easydropdown');
// AMD/RequireJS
define(['easydropdown/bundles/easydropdown.js'] , easydropdown => {
  ...
});
// Browser
<script src="bundle/easydropdown.js"></script>

2. Load a theme of your choice.

<link rel="stylesheet" href="themes/flax.css" />
<link rel="stylesheet" href="themes/beanstalk.css" />
<link rel="stylesheet" href="themes/ivy.css" />

3. Initialize the easydropdown on your <select> element and done.

const selectElement = document.querySelector('#select');
const instance = easydropdown(selectElement);

// OR
easydropdown.all();

4. Customize the dropdown with the following options.

const selectElement = document.querySelector('#select');
const instance = easydropdown(selectElement, {
      {
        behavior: {
          clampMaxVisibleItems:    true,
          closeOnSelect:           false,
          openOnFocus:             false,
          showPlaceholderWhenOpen: false,
          liveUpdates:             false,
          loop:                    false,
          maxVisibleItems:         15,
          useNativeUiOnMobile:     true,
        },
        callbacks: {
          onClose:  null,
          onOpen:   null,
          onSelect: null
        },
        classNames: {
          root:           'edd-root',
          rootOpen:       'edd-root-open',
          rootOpenAbove:  'edd-root-open-above',
          rootOpenBelow:  'edd-root-open-below',
          rootDisabled:   'edd-root-disabled',
          rootInvalid:    'edd-root-invalid',
          rootFocused:    'edd-root-focused',
          rootHasValue:   'edd-root-has-value',
          rootNative:     'edd-root-native',
          gradientTop:    'edd-gradient-top',
          gradientBottom: 'edd-gradient-bottom',
          head:           'edd-head',
          value:          'edd-value',
          arrow:          'edd-arrow',
          select:         'edd-select',
          body:           'edd-body',
          bodyScrollable: 'edd-body-scrollable',
          bodyAtTop:      'edd-body-at-top',
          bodyAtBottom:   'edd-body-at-bottom',
          itemsList:      'edd-items-list',
          group:          'edd-group',
          groupDisabled:  'edd-group-disabled',
          groupHasLabel:  'edd-group-has-label',
          groupLabel:     'edd-group-label',
          option:         'edd-option',
          optionDisabled: 'edd-option-disabled',
          optionFocused:  'edd-option-focused',
          optionSelected: 'edd-option-selected',
        }
    }
}),

5. API methods.

// open
edd.open();
// close
edd.close();
// refresh
edd.refresh();
// validate your form
const isValid = edd.validate();
console.log(isValid); // false
// destroy the instance
edd.destroy();