Search Input

The SearchInput component provides a styled search field with clear and submit affordances.

Usage & Examples

Search With Button

search-with-button.tsx
<SearchInput
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />

Props API

37 props
Columns
Search Input props API
Default
Description
autoCompletestringNoprops—-
classNamestringNostyling—Additional class name for the component root.
clearAriaLabelstringNoprops"Clear search"Accessible label for the clear button.
clearButtonClassNamestringNoprops—Additional class name for the clear button.
containerClassNamestringNoprops—Additional class name for the outer label/input container.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultValuestringNoprops""Initial search query for uncontrolled usage.
errorMessageReactNodeNoprops—-
helperTextReactNodeNoprops—-
iconSearchInputIconComponent | nullNoprops—Optional icon component to render inside the search input. Pass null to hide the default search icon.
iconClassNamestringNoprops—Additional class name for the rendered icon.
iconPosition"left" | "right"Noprops"left"Position of the icon relative to the input text.