lion/docs/components/inputs/combobox/overview.md

Inputs >> 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 '@lion/core';
import { listboxData } from '../../../../packages/listbox/docs/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';