# Search Input
URL: /docs/web/components/search-input

Search Input component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useCallback, useState } from 'react';

import { SearchInput, type SearchInputMode } from '@docyrus/ui/components/search-input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';
import { cn } from '@docyrus/ui/primitives/lib/utils';

export function SearchInputDemo() {
  type Variant = 'default' | 'outline' | 'ghost';
  type Size = 'default' | 'sm' | 'lg';

  const [variant, setVariant] = useState
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Size</span>
                
                  
                    
                    
                  
                
              </div>
              <div className="space-y-1.5">
                <span className="text-xs font-medium">Mode</span>
                
                  
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Disabled</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div className="mx-auto max-w-sm space-y-3">
        
        {searchResult ? (
          <p className="text-center text-xs text-muted-foreground">{searchResult}</p>
        ) : null}
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-search-input
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
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` | — |