A SearchInput allows users to enter and submit a search query.
Using search inputs
Use the SearchInput component when you need users to perform text-based searches for specific content, like finding results on a page.
Avoid using SearchInput if you require a predictive list of options in a menu while users type within the input field. In such cases, use TypeaheadSearch instead.
Avoid using SearchInput to enable users to search a dataset of options for a form field. Instead, use Lookup.
Search inputs may include the following elements:
A text input where users can type their search queries. The input features the 'search' icon for clarity and should also include a placeholder to clarify its purpose.
- Button (optional)
The input can be accompanied with a button, either a text button or an icon-only one, in order to trigger the search action. It's crucial not to customize the label of the search button and consistently employ the term "Search" or its appropriate translation. Additionally, avoid using long text within this button.
The SearchInput component can be categorized based on the visibility and type of button it contains:
The SearchInput can consist of the input field alone or include the decorative icon. In this scenario, using the icon is suggested to emphasize that the input serves as a search input, distinguishing it from a simple text input.
With text button
The SearchInput also has the option to feature a text button to initiate the search process.
With icon-only button
The SearchInput can also include an icon-only button, particularly useful when space needs to be conserved by omitting the button text, such as on mobile devices. In such instances, since the 'search' icon will already be present on the button, there's no need to replicate it within the input. In this case, refrain from using an icon within the input field to avoid duplication with the icon in the button.
Search inputs have the following visually separate states:
- Active - Focus
Open the console to see emitted events.
Default, with placeholder
placeholder attribute will be passed down to the
This example provides a
buttonLabel prop, which enables the submit button.
clearable prop from the TextInput component adds a "clear" button when input is present.
A SearchInput can be wrapped in the Field component to add features like a semantic label, description and help text, validation messages, and more. See the Field page for more information.
Find Wikipedia articles
If there is an article matching your search term, you will be taken directly to that article. Otherwise, you will be taken to the search page.
This component contains a TextInput with a preset start icon and input type. A button can be added by providing the
The default slot allows you to pass in an options menu that can be absolutely positioned to line up with the text input, e.g. a list of autocomplete options. See TypeaheadSearch for an example.
TextInput props apply
This component contains a TextInput component. You can bind TextInput props to this component and they will be passed to the TextInput within.
Attributes passed to input
This component will pass any HTML attributes applied to it, except for CSS class, to the
<input> element within the component.
|Value of the search input, provided by ||-|
|Submit button text.|
If this is provided, a submit button with this label will be added.
|Whether the search input is disabled.||-|
|Focus the component's input element.||Returns: |
|event ||When the input value changes via direct use of the input|
|event ||When an input value change is committed by the user (e.g. on blur)|
|event ||When the input comes into focus|
|event ||When the input loses focus|
|value ||When the input value changes|
|value ||When the submit button is clicked.|
|default||A slot for passing in an options menu that needs to be positioned|
The basic CSS-only SearchInput component is a CSS-only TextInput with
type="search" and a start icon, wrapped in a
<div> with the CSS class
.cdx-search-input. The CSS-only search icon is set up for you, so you do not need to include it in your Less code.
To add a button to the CSS-only SearchInput, do the following:
- Add the
.cdx-search-input--has-end-buttonclass to the root element
- Wrap the CSS-only TextInput component in a div with the class
- Add a CSS-only button with the classes