# Search Input

Fuzzy search input with autocomplete



<ComponentPreview base="opentui" name="search-input-demo" />

Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add @termcn/opentui-search-input
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource base="opentui" name="search-input" title="components/ui/search-input.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

Usage [#usage]

```tsx
import { SearchInput } from "@/components/ui/search-input";
```

```tsx
<SearchInput
  label="Search Packages"
  options={["react", "vue", "svelte", "angular", "solid"]}
  placeholder="Search..."
  onSelect={(item) => console.log("Selected:", item)}
/>
```

API Reference [#api-reference]

SearchInput [#searchinput]

| Prop           | Type                                                                                         | Default       |
| -------------- | -------------------------------------------------------------------------------------------- | ------------- |
| `options`      | `T[]`                                                                                        | -             |
| `getValue`     | `(item: T) => string`                                                                        | -             |
| `value`        | `string`                                                                                     | -             |
| `onChange`     | `(query: string) => void`                                                                    | -             |
| `onSelect`     | `(item: T) => void`                                                                          | -             |
| `placeholder`  | `string`                                                                                     | `"Search..."` |
| `label`        | `string`                                                                                     | -             |
| `maxResults`   | `number`                                                                                     | `5`           |
| `id`           | `string`                                                                                     | -             |
| `borderStyle`  | `"single" \| "double" \| "round" \| "bold" \| "singleDouble" \| "doubleSingle" \| "classic"` | `"round"`     |
| `paddingX`     | `number`                                                                                     | `1`           |
| `cursor`       | `string`                                                                                     | `"█"`         |
| `searchIcon`   | `string`                                                                                     | `"🔍 "`       |
| `resultCursor` | `string`                                                                                     | `"› "`        |