Search Input
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
| Prop | Type | Default | Required |
|---|---|---|---|
size | "sm" | "md" | md | - |
state | "error" | - | - |
css | CSSProperties | - | - |
name | string | - | |
as | JSX.IntrinsicElements | - | - |
type | "number" | "text" | "search" | "email" | "password" | "tel" | "url" | - | - |
clearText | string | Clear | - |