Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-search-inputUsage
import {
SearchInput
} from "@docyrus/ui/components/search-input";
<SearchInput
variant="default"
size="sm"
ref={...}
value="..."
onValueChange={() => {}}
onSearch={() => {}}
mode="debounce"
debounceMs={300}
/>Variants
| Variant | Description |
|---|---|
default | Default style |
outline | Outline — border-border focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 |
ghost | Ghost — border-transparent shadow-none focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 |
Sizes
| Size | Description |
|---|---|
sm | Small — h-8 px-2 text-xs |
default | Default — h-8 px-2.5 text-sm |
lg | Large — h-11 px-3 text-base |
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "outline" | "ghost" | "default" |
size | "sm" | "default" | "lg" | "default" |
ref | Ref<HTMLInputElement> | — |
value | string | — |
onValueChange | (value: string) => void | — |
onSearch | (value: string) => void | — |
mode | SearchInputMode | 'debounce' |
debounceMs | number | 300 |
className | string | — |