On this page

Datalist

Point an input’s list at a <datalist> id. The browser draws a typeahead from the options. There is no script and no extra class.

Sizes are minified and gzip. A plugin figure includes the Bootstrap runtime that plugin imports. Shipping every plugin is `bootstrap.bundle.min.js` at 23.3 KB gzip, not the sum of these rows.
	What runs it	JavaScript
Bootstrap 5.3	No equivalent. Typeahead is a third-party script or a dropdown.	Not in bootstrap.min.js
This repo	`<input list>` and `<datalist>`	0 KB

Markup this component accepts. The full inventory is /components.json.
Avoid	`list` is the datalist id with no `#`. The datalist is not a `.dropdown-menu`. Do not put `role="listbox"` on the datalist. The browser exposes the suggestions.

How it works

list on the input is the datalist’s id, with no #. Suggestions filter as you type. You can still submit a value that is not in the list.
Style the input with .form-control. The dropdown is the browser’s; it does not use .dropdown-menu.
Pair with type="search" when the field is a query. Text, search, email, tel, url, and number lists are the usual cases.
Firefox on Android does not show the suggestion menu. The input still accepts a typed value.

Text

Type a letter. The list narrows to matching flavors. The value is still free text.

Flavor

<label class="form-label" for="ice-cream">Flavor</label>
<input class="form-control" list="ice-cream-flavors" id="ice-cream" name="ice-cream" placeholder="Type to filter">
<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

Search

Same list pattern on type=search. Use this when the field is a query, including in a search landmark.

Search docs

<label class="form-label" for="docs-query">Search docs</label>
<input class="form-control" type="search" list="docs-topics" id="docs-query" name="q" placeholder="Accordion, modal, …">
<datalist id="docs-topics">
  <option value="Accordion"></option>
  <option value="Collapse"></option>
  <option value="Datalist"></option>
  <option value="Field sizing"></option>
  <option value="Modal"></option>
  <option value="Navbar"></option>
  <option value="Validation"></option>
</datalist>

Accessibility

Label with <label for> or wrap the control. Do not use placeholder as the only name.

A datalist is a suggestion list, not a required choice. The user can submit a value that is not in the options.

Browser support

Three columns, not one baseline. The same row is on the overview.
No script	Polyfill	No fallback
`<datalist>`: Chrome 20+, Firefox 4+, Safari 12.1+. Firefox on Android does not show the suggestion menu.	None	None. Without a suggestion menu the input still accepts a typed value.