SearchInput

SearchInputs collect search queries and can accept any user input.

For more information on how to use the features and props for this component, check out the developer documentation.

The SearchInput component can be an either controlled or uncontrolled input. If you wish to use a controlled SearchInput, utilize the value and onSearchChange props. For an uncontrolled SearchInput, use the defaultValue prop.

This component has a default placeholder of Search..., which can be configured to specify which resources are being searched. When the Enter key is hit while the SearchInput is in focus, an onSearchSubmit callback function is trigged.

Using the <form> element in conjunction with a declaration of role="search" will provide the largest amount of accessibility support.

<form role="search">
  <SearchInput searchInputAriaLabel="global" />
</form>

Generally, this is used for a global search, which typically only has one occurrence on a page. If more than one occurrence is anticipated, please be aware that each <form role="search" /> will appear as a search landmark and could potentially make the page "busy" for screen readers.

When not wrapping the field in a <form />, please be sure to provide the searchInputAriaLabel to the SearchInput.

Note: There is no need to use the word ‘search’ again in value, the screen reader will pick that name with role=”search” attribute itself.

<form role="search" aria-label="Global Search">
    <input type="search" name="test" />
</form>

Screen reader will read "Global search search landmark"

NameTypeDefaultDescription
defaultValuestringIf you wish to use an uncontrolled input, pass a defaultValue prop and a ref to access the input's native value prop or by other DOM ref means.
onSearchChange(value: string) => voidCalled when the SearchInput value changes.
onSearchSubmit(value: string) => voidCalled when the SearchButton is clicked or when the Enter key is pressed while SearchInput is in focus. NOTE: this does not trigger an actual form submit event. It simply represents an explicit action by the user to search as opposed to onSearchChange.
placeholderstring"Search…" Placeholder text. The default value is a locale translation of 'Search…'
searchInputAriaLabelstringAria label for search input, used by screen readers.
valuestringCreates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.

You can override the styles of the SearchInput component by setting a custom theme on the Configuration component.

{
      •       'border-radius': 9999
      •     }
    •   }
}