@lion/listbox

A listbox widget presents a list of options and allows a user to select one or more of them

Usage no npm install needed!

<script type="module">
  import lionListbox from 'https://cdn.skypack.dev/@lion/listbox';
</script>

README

Inputs >> Listbox >> Overview ||10

A widget that presents a list of options and allows a user to select one or more of them. A listbox that allows a single option to be chosen is a single-select listbox; one that allows multiple options to be selected is a multi-select listbox.

From listbox wai-aria best practices

import { html } from '@mdjs/mdjs-preview';
import '@lion/listbox/define';

export const main = () => html`
  <lion-listbox name="listbox" label="Default">
    <lion-option .choiceValue=${'Apple'}>Apple</lion-option>
    <lion-option checked .choiceValue=${'Artichoke'}>Artichoke</lion-option>
    <lion-option .choiceValue=${'Asparagus'}>Asparagus</lion-option>
    <lion-option .choiceValue=${'Banana'}>Banana</lion-option>
    <lion-option .choiceValue=${'Beets'}>Beets</lion-option>
  </lion-listbox>
`;

Features

  • Single & Multiple Choice
  • Orientation
  • Rotation when using keyboard for selection

Installation

npm i --save @lion/listbox

import '@lion/listbox/define';