Search Input
Related components
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" className="w-80" placeholder="Search" />
API Reference
| Prop | Type | Default | Required |
|---|---|---|---|
appearance | "standard" | "modern" | standard | - |
as | JSX.IntrinsicElements | - | - |
clearText | string | Clear | - |
family | "body" | "display" | "mono" | Partial<Record<Breakpoint, "body" | "display" | "mono">> | - | - |
noCapsize | boolean | - | - |
onValueChange | (newValue: string) => void | - | - |
size | "sm" | "md" | "lg" | md | - |
state | "error" | - | - |
theme | "white" | "grey" | - | - |
weight | "bold" | "normal" | Partial<Record<Breakpoint, "bold" | "normal">> | - | - |