{% include "@bolt-components-typeahead/typeahead.twig" %}
| 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 |
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
|
|
|
disabled
|
Disables input as well as the search and cancel buttons. |
boolean
|
false
|
|
npm install @bolt/components-typeahead