# Search input (goodtabs UI)

A search field with a leading icon, a clear button and a keyboard hint.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/search-input.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/search-input`

## Usage

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

<SearchInput placeholder="Search resources" shortcut="⌘K" onValueChange={setQuery} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` |  | Controlled value. Leave out for an uncontrolled input. |
| defaultValue | `string` | `""` | Starting value for the uncontrolled form. |
| onValueChange | `(value: string) => void` |  | Fires with the new string on every change and when cleared. |
| loading | `boolean` | `false` | Swaps the search icon for a spinner. |
| shortcut | `string` |  | Keyboard hint shown on the right, hidden while there is a value. |
| clearLabel | `string` | `"Clear search"` | Accessible name for the clear button. |

## When to use

- Filtering a list, table or grid as the person types
- A site or app search box that opens with a keyboard shortcut
- Anywhere a plain input would need a search icon, a clear button and a hint bolted on

## When not to use

- A full command palette with results and keyboard navigation: build that on a Command component
- Forms where the field is a plain text value, not a query

## Notes for agents

- It extends shadcn's Input, so size, disabled and every input prop pass through
- Uncontrolled by default; pass value plus onValueChange to control it
- The shortcut prop only draws the hint, wire the actual keyboard shortcut yourself
- Escape clears the value and keeps focus in the field; the native search cancel button is hidden

Docs: https://ui.goodtabs.co/components/search-input