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


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