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

Hide code

Full width

Hide code

Change height

The SearchInput uses the height property to resize itself.

Hide code

Disabled

Hide code

Add margins

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

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.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

SearchInput Props

This component composes ../text-input