A search input with matching search icon

SearchInput wraps Input and adds an icon to visualise the specific input type, it's recommended to use this component when the user is performing a search query. When the user types into the SearchInput the component renders a clear button that clears the typed value.

<SearchInput name="search" css={{ width: 320 }} placeholder="Search" />

API Reference

PropTypeDefaultRequired
size
"sm" | "md"
md

-

state
"error"

-

-

cssCSSProperties

-

-

namestring

-

asJSX.IntrinsicElements

-

-

type
"number" | "text" | "search" | "email" | "password" | "tel" | "url"

-

-

clearText
string
Clear

-