@lion/combobox
TypeScript icon, indicating that this package has built-in type declarations

0.11.1 • Public • Published

Combobox >> Overview ||10

A combobox is a widget made up of the combination of two distinct elements:

  • a single-line textbox
  • an associated listbox overlay

Based on the combobox configuration and entered textbox value, options in the listbox will be filtered, checked, focused and the textbox value may be autocompleted. Optionally, the combobox contains a graphical button adjacent to the textbox, indicating the availability of the pop-up.

Fore more information, consult Combobox wai-aria design pattern

import { html } from '@mdjs/mdjs-preview';
import { listboxData } from '../listbox/src/listboxData.js';
import '@lion/listbox/define';
import '@lion/combobox/define';
import { lazyRender } from './src/lazyRender.js';
export const main = () => html`
  <lion-combobox name="combo" label="Default">
    ${lazyRender(
      listboxData.map(
        (entry, i) =>
          html` <lion-option .checked="${i === 0}" .choiceValue="${entry}">${entry}</lion-option> `,
      ),
    )}
  </lion-combobox>
`;

...show more

Features

tbd

Installation

npm i --save @lion/combobox
import '@lion/combobox/define';
import '@lion/listbox/lion-option.js';

Package Sidebar

Install

npm i @lion/combobox

Weekly Downloads

365

Version

0.11.1

License

MIT

Unpacked Size

187 kB

Total Files

16

Last publish

Collaborators

  • tlouisse
  • narzac
  • d4kmor