Autocomplete
Material Design 3 autocomplete web component (lit-material-autocomplete): a text field with a filtered option list.
- 4.4 KB gzipped
- @lit-material/autocomplete 0.0.3
- Renders on the server
Example
Autocomplete
A text field that filters a data-driven option list as you type.
Apple
Apricot
Banana
Blueberry
Cherry
Cranberry
Date
Grape
Markup
<lit-material-autocomplete variant="filled" label="Fruit"></lit-material-autocomplete>
<script type="module">
el.options = [{ label: "Apple", value: "apple" }, ...];
</script>
Error, disabled option
Apple
Apricot
Banana
Blueberry
Cherry
Cranberry
Date
Grape
Please choose a fruit
Install
npm install @lit-material/autocomplete @lit-material/tokensimport "@lit-material/autocomplete";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-autocomplete>
Material Design 3-styled autocomplete — a text field that filters a
data-driven options list as the user types, following the WAI-ARIA
"Editable Combobox With List Autocomplete" pattern
(https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
options | options | AutocompleteOption[] | [] | |
variant | variant | AutocompleteVariant | "filled" | |
label | label | string | "" | |
value | value | string | "" | |
placeholder | placeholder | string | "" | |
name | name | string | "" | |
required | required | boolean | false | |
disabled | disabled | boolean | false | |
error | error | boolean | false | |
errorText | error-text | string | "" | |
supportingText | supporting-text | string | "" | |
open | open | boolean | false | |
freeText | free-text | boolean | false | When set, typed text with no matching option is committed as-is instead of being reverted. |
form | form | string | undefined | none |
Events
| Event | Description |
|---|---|
change | Fires when the committed value changes (option picked, or free text committed when free-text is set). |
CSS parts
| Part | Description |
|---|---|
container | The field container (background/border). |
label | The floating label element. |
input | The native <input> element. |
popover | The popover surface wrapping the listbox. |
listbox | The listbox of filtered options. |
option | A single option row. |
supporting | The supporting-text row. |