Input
The Input
component is used to capture query input via a text field. It can also provide suggestions, typeahead and instant search modes.
Import
Usage
Additional imports used in the examples:
Editable Example
Suggestions
Loading...
Suggestions
Editable Example
Suggestions
Loading...
Results
Editable Example
Results
Typeahead
Editable Example
Suggestions
Loading...
Standard
By default <Input />
has an additional mode "instant"
and it is also the default value (search on change). To disable it, simple change mode to "standard"
.
Editable Example
Suggestions
Loading...
Existing input element
If you have an existing input and don't want Input to render another extra input of its own then you can pass in the inputElement
prop, this way it will not render its own input and instead will apply all attributes and handlers to the element that you just passed in.
Editable Example
Suggestions
Loading...
Props
Input
component props inherits the input
element props with some additional for speech recognition and loading state
Name | Type | Default | Description |
---|---|---|---|
mode | 'standard' | 'typeahead' | 'suggestions' | 'results' | 'standard' | The mode of the combobox. 'standard' will operate as a normal text input. 'typeahead ' will provide an inline completion suggestion. 'suggestions' will provide an autocomplete menu with options to select. 'results' will perform a full search using the provided term and render full results. |
onChange | (value: string) => void | The callback when the input value changes. Note: The event is not passed as the argument. | |
maxSuggestions | number | Sets how many autocomplete suggestions are shown in the box below the search input. |