Appearance
Autocomplete ​
Loading...
Autocomplete: a text input with a dropdown of selectable suggestions.
- Tag:
<flint-autocomplete> - Class:
FlintAutocomplete
Import ​
ts
import 'flint-ui'; // auto-registers all
// or
import { FlintAutocomplete } from 'flint-ui';Usage ​
html
<flint-autocomplete></flint-autocomplete>Properties ​
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
options | options | AutocompleteOption[] | [] | The list of selectable options. |
freeSolo | free-solo | boolean | false | When true, allows arbitrary values that are not in the options list. |
disabled | disabled | boolean | false | Whether the autocomplete input is disabled. |
value | value | string | '' | The current selected value. |
placeholder | placeholder | string | '' | Placeholder text shown when the input is empty. |
Events ​
| Event | Detail | Description |
|---|---|---|
flint-autocomplete-change | — | Fired when the selected value changes. |
CSS Custom Properties ​
| Property | Default |
|---|---|
--flint-autocomplete-dropdown-max-height | 250px |
--flint-autocomplete-z-index | 10 |
--flint-autocomplete-option-padding | 10px 12px |
--flint-font-family | — |
--flint-input-border-color | — |
--flint-input-border-radius | — |
--flint-text-color | — |
--flint-input-bg | — |
--flint-primary-color | — |
--flint-input-disabled-bg | — |
--flint-text-color-subtle | — |
--flint-surface-1 | — |
--flint-hover-color | — |
--flint-text-color-muted | — |