SearchInput

The SearchInput provides a search field with built-in submit/clear rules. It uses a glass style and supports light and dark color modes.

Design guidance

When and how to use this

Use a SearchInput when users need to search a list or dataset with a simple text query.

Provide a clear label via inputProps.label for accessibility.
Use submitOnChange to trigger searches as users type once input has 3+ characters.
Use showClearButtonOnEmpty when you want the clear affordance to stay visible even with no value.

When to consider something else

For free-form text that is not a search, use a TextInput. If you need advanced filtering (facets, chips), compose SearchInput with additional controls.

React

The SearchInput enforces sensible search UX defaults:

Prevents submit for values shorter than 3 characters
Clears and calls onSearch('') when submitted empty
Optionally calls onSearch on change when submitOnChange is true and length ≥ 3
Provides a clear icon button to reset the value

live

<Stack spacing="600">
  <VStack align="start" spacing="400">
    <Label>Light</Label>
    <VStack align="start" spacing="400">
      <VStack align="start">
        <Label>Empty</Label>
        <SearchInput inputProps={{ label: 'Search' }} onSearch={() => {}} />
      </VStack>
      <VStack align="start">
        <Label>With value</Label>
        <SearchInput defaultSearchTerm="filled" inputProps={{ label: 'Search' }} onSearch={() => {}} />
      </VStack>
      <VStack align="start">
        <Label>Disabled</Label>
        <SearchInput inputProps={{ label: 'Search' }} isDisabled onSearch={() => {}} />
      </VStack>
    </VStack>
  </VStack>
  <VStack align="start" spacing="400">
    <Label>Dark</Label>
    <VStack align="start" spacing="400" bgColor="neutral.875" p="300">
      <VStack align="start">
        <Label color="white">Empty</Label>
        <SearchInput 
          colorMode="dark"
          inputProps={{ label: 'Search' }} 
          onSearch={() => {}} 
        />
      </VStack>
      <VStack align="start">
        <Label color="white">With value</Label>
        <SearchInput 
          colorMode="dark"
          defaultSearchTerm="filled"
          inputProps={{ label: 'Search' }} 
          onSearch={() => {}} 
        />
      </VStack>
      <VStack align="start">
        <Label color="white">Disabled</Label>
        <SearchInput 
          colorMode="dark"
          inputProps={{ label: 'Search' }} 
          isDisabled
          onSearch={() => {}} 
        />
      </VStack>
    </VStack>
  </VStack>
</Stack>

Usage

<SearchInput onSearch={value => console.log(value)} />

Props

Prop	Type	Default	Description
`onSearch`	(value: string) => void		Called when a search action occurs
`defaultSearchTerm`	string	''	Initial value
`submitOnChange`	boolean	false	Calls onSearch when length ≥ 3 while typing
`inputProps`	TextInputProps		Props forwarded to underlying TextInput
`onClose`	() => void		Called when the input is cleared/closed
`colorMode`	'light'	'light'	Force color mode for the input
`isDisabled`	boolean	false	Disables the input
`showClearButtonOnEmpty`	boolean	false	Show clear button when value is empty

Notes

Set the accessible label via inputProps.label (e.g., { inputProps: { label: 'Search' } }).
The clear button is always rendered as an icon button with an accessible label of "Clear".

Accessibility

Provide a descriptive label for screen readers.
Clear button is operable via keyboard (Enter/Space) and announced by its label.
When value is cleared, onSearch('') is called to reset results.

RemoveScroll

Select

Design System

Settings