Search Input

View on GitHub

The SearchInput component is a component that combines a TextInput with a search icon. It works exactly the same as a TextInput.

Basic example

<SearchInput placeholder="Filter traits..." />
Hide code

Full width

<SearchInput placeholder="Filter traits..." width="100%" />
Hide code

Change height

The SearchInput uses the height property to resize itself.

<SearchInput placeholder="Filter traits..." height={40} />
Hide code


<SearchInput disabled />
Hide code

Add margins

The SearchInput is based on the Box layout primitive and accepts setting margin properties.

<SearchInput placeholder="Filter traits..." height={40} marginBottom={40} />
Hide code

Controlled usage

The SearchInput component works the same as using input directly. Use to get the value of the component on change.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ value: ''}}>
  {({ state, setState }) => (
      onChange={e => setState({ value: })}
Hide code

SearchInput Props

This component composes ../text-input

height = 32
appearance = 'default'