<lit-typeahead>

Basic usage

<lit-typeahead
  id="country"
  name="country"
  items='["United States", "Canada", "Mexico"]'
></lit-typeahead>

Native datalist fallback

<lit-typeahead
  id="country-native"
  name="country"
  use-native
  items='["United States", "Canada", "Mexico"]'
></lit-typeahead>

With placeholder

<lit-typeahead
  id="country-placeholder"
  name="country"
  items='["United States", "Canada", "Mexico"]'
  placeholder="Select a country"
></lit-typeahead>

With select-first

<lit-typeahead
  id="country-select-first"
  name="country"
  items='["United States", "Canada", "Mexico"]'
  select-first
></lit-typeahead>

With initial value

<lit-typeahead
  id="country-value"
  name="country"
  items='["United States", "Canada", "Mexico"]'
  value="United States"
></lit-typeahead>

Object items (emits only the value by default)

Items can be objects {label, value} — the label is shown in the dropdown and in the input after selection, the value is emitted on change.

— emitted change payload

<lit-typeahead
  id="country-objects"
  name="country"
  items='[{"label": "United States", "value": "US"}, {"label": "Canada", "value": "CA"}, {"label": "Mexico", "value": "MX"}]'
></lit-typeahead>

Object items with emit-object

emit-object makes change emit the whole item object; the input still shows the item's label.

— emitted change payload

<lit-typeahead
  id="country-objects-emit"
  name="country"
  items='[{"label": "United States", "value": "US"}, {"label": "Canada", "value": "CA"}, {"label": "Mexico", "value": "MX"}]'
  emit-object
></lit-typeahead>