Bolt Typeahead

Typeahead is an input field with dropdown-like listbox that displays suggested results that most closely match a user's given search term.

Published Last updated: 2.26.0 Change log Github NPM
Twig Usage {% include "@bolt-components-typeahead/typeahead.twig" %} Schema Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

object —
  • —
max_results

The maximum number of typeahead results to display

number 10
  • —
items

An array of objects that's used to populate the suggestion list that appears below the input as the users type. This array of objects can be asynchronously fetched and should contain a label, url, and optionally description.

array —
  • —
clear_input_text

Screenreader-specific text for the clear search button, intended to provide a longer, more descriptive explanation of the clear button's behavior.

string Clear search results
  • —
submit_button_text

Screenreader-specific text for the submit button, intended to provide a longer, more descriptive explanation of the submit button's behavior.

string Submit search query
  • —
input_label

Screenreader-specific label text associated with the search input.

string —
  • —
input_placeholder

The placeholder text to display inside the Typeahead search input.

string Enter your search query
  • —
input_value

Initial value to pre-populate the input field

string —
  • —
input_name

Input element's name attribute used when pre-rendering the component

string —
  • —
no_highlight

Disable text highlighting in matching search results (highlighting is enabled by default)

boolean false
  • —
Install Install npm install @bolt/components-typeahead Dependencies @bolt/components-button @bolt/components-form @bolt/components-icon @bolt/core-v3.x @bolt/lazy-queue fuse.js mousetrap react-autosuggest react-html-parser