Search Input

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
label
string
non-standard above-field label
onClear
function
show clear button and trigger when button is clicked
error
boolean
show error state
false
loading
boolean
show progress indicator
false
placeholder
string
standard in-field usage hint
subLabel
string
non-standard below-field label or error message

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