51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
# 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](https://www.w3.org/TR/wai-aria-practices/#combobox)
|
|
|
|
```js script
|
|
import { html } from '@mdjs/mdjs-preview';
|
|
import { listboxData } from '../listbox/src/listboxData.js';
|
|
import '@lion/ui/define/lion-combobox.js';
|
|
import '@lion/ui/define/lion-option.js';
|
|
import { lazyRender } from './src/lazyRender.js';
|
|
```
|
|
|
|
```js preview-story
|
|
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](./examples.md)
|
|
|
|
## Features
|
|
|
|
> tbd
|
|
|
|
## Installation
|
|
|
|
```bash
|
|
npm i --save @lion/ui
|
|
```
|
|
|
|
```js
|
|
import '@lion/ui/define/lion-combobox.js';
|
|
import '@lion/ui/define/lion-option.js';
|
|
```
|