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

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

Full width

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

Change height

The SearchInput uses the height property to resize itself.

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

Disabled

search
<SearchInput disabled />
code Hide code

Add margins

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

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

Controlled usage

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

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

SearchInput Props

This component composes ../text-input

height = 32
appearance = 'default'