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
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass

Rounding

none
medium
large

Shadows

none
light
strong
visual-variants.tsx
// Themes
<SearchInput theme="primary"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput theme="secondary"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput theme="tertiary"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput theme="quaternary"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />

// States
<SearchInput state="success"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput state="warning"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput state="error"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput state="info"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />

// Sizes
<SearchInput size="xs"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput size="small"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput size="medium"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput size="large"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />

// Variants
<SearchInput variant="solid"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput variant="outline"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput variant="glass"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />

// Rounding
<SearchInput rounding="none"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput rounding="medium"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput rounding="large"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />

// Shadows
<SearchInput shadow="none"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput shadow="light"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />
<SearchInput shadow="strong"
    label="Find components"
    defaultValue="chart"
    showSearchButton
  />

Interaction states

Loading
interaction-states.tsx
// Loading
<SearchInput loading
    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.