Select Rich

🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

• not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
• not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

lion-select-rich component is a 'rich' version of the native <select> element. It allows to provide fully customized options and a fully customized invoker button. The component is meant to be used whenever the native <select> doesn't provide enough styling/theming/user interaction opportunities.

Its implementation is based on the following Design pattern: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

Features

• fully accessible
• flexible api
• fully customizable option elements
• fully customizable invoker element
• Mimics native select interaction mode (windows/linux and mac)

How to use

Installation

npm i --save @lion/select-rich

import '@lion/select-rich/lion-select-rich.js';
import '@lion/select-rich/lion-options.js';
import '@lion/option/lion-option.js';

Example

<lion-select-rich
  name="favoriteColor"
  label="Favorite color"
  .errorValidators=${[['required']]}
>
  <lion-options slot="input">
    <lion-option .choiceValue=${'red'}>Red</lion-option>
    <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
  </lion-options>
</lion-select-rich>

You can also set the full modelValue for each option.

  <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>

You can get/set the the checkedIndex and checkedValue

const el = document.querySelector('lion-select-rich');
console.log(el.checkedIndex); // 1
console.log(el.checkedValue); // 'hotpink'
console.log(el.modelValue); // [{ value: 'red', checked: false }, { value: 'hotpink', checked: true }]

You can provide an invoker rendering a custom invoker that gets the selected value(s) as an input property .selectedElement

<lion-select-rich>
  <my-invoker-button slot="invoker"></my-invoker-button>
  <lion-options slot="input">
    ...
  </lion-options>
</lion-select-rich>

Other Resources

• Design Considerations