Use Search Input...
- For page search query.
Don't use Search Input...
- If you need our default Search Input with options: use Combobox with Search Input instead.
The preview has been updated.
ShareManaging state
As is the case with most form elements, folks often want to "control" this component. Controlling a component means that you take ownership over its state rather than letting the browser manage the state for you. When you control a component, you own the source of truth for the UI. This means that you don't need to query the DOM in order to determine the current value of the element. So, when it comes time to use the value of the element somewhere else (e.g. submitting the selection to a back-end service) you can trust your stored value.
To control a SearchInput, store the selected value (e.g., in React state or a Redux store) and provide a handler to update this value when users interact with the component.
The preview has been updated.
If you don't need to manage the state of the SearchInput, you can omit the value and onChange props, allowing the browser to handle the state. Consider using the defaultValue prop to specify the initial selected value and wrapping inside of a StandardForm to handle the onSubmit.
Accessibility
Provide assistive devices with information on what the input field does. You can either:
- Use an
aria-labelattribute with a localized value. - Wrap the Search Input into a
FormFieldwith aFormLabelcomponent with thevisuallyHiddenprop. Refer to Form
Provide assistive devices with information on what the buttons do for the Search and Clear icon buttons that are simply icons and have no visible text. For react users, the following props are required: accessibleTextForClearButton and accessibleTextForSearchButton.
Implementation
Avoid placing a Search Input inside an element that is a table cell or has CSS display: table-cell. This configuration may result in the Search Input being rendered more narrowly than its actual minimum width. Use Grid to constrain it instead.
