Search Input

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
onClear
function
show clear button and trigger when button is clicked
loading
boolean
show progress indicator
false
placeholder
string
in-field usage hint

Replaces the search icon with a loading indicator

Providing a onClear prop will display a close icon.

Exercise consistency and clarity with explicit placeholder text.

Do
Don't

Use consistent theming to encourage visual hierarchy

Do
Don't