# SearchInput

O campo de busca com a lupa no lugar: o arranjo que toda listagem montava na
mão com `position: absolute`.

Sai como `<input type="search">`, então o leitor de tela anuncia "busca" e o
Esc limpa: o campo não controlado sozinho, o controlado pelo `onClear`.

`shortcut` mostra o atalho num `Kbd` dentro do campo (`"mod+k"` sai ⌘K no Mac
e Ctrl K no resto). Só o desenho: registrar o atalho é trabalho de quem monta
a tela, porque é ela que sabe o que mais escuta teclado.

Combina com o `filter` do `DataTable`: o campo fica onde a tela pedir e a
tabela só recebe o texto.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `SearchInput` - `value` e `onValueChange` obrigatórios. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { SearchInput } from '@rivocode/ui'
```

## Exemplos

### Padrão

```tsx
import { DataTable, SearchInput, type Column } from '@rivocode/ui'
import { useState } from 'react'

export function Default() {
  return (
    <div className="w-full max-w-sm">
      <SearchInput placeholder="Buscar nota…" aria-label="Buscar nota" />
    </div>
  )
}
```

### Com atalho

```tsx
import { DataTable, SearchInput, type Column } from '@rivocode/ui'
import { useState } from 'react'

type Nota = { id: string; number: string; customer: string }

const NOTAS: Nota[] = [
  { id: '1', number: '4813', customer: 'Clínica São Lucas' },
  { id: '2', number: '4814', customer: 'Transportes Cabo Branco' },
  { id: '3', number: '4815', customer: 'Ótica Central' },
]

const COLUNAS: Column<Nota>[] = [
  { key: 'number', header: 'Número' },
  { key: 'customer', header: 'Cliente' },
]

export function WithShortcut() {
  return (
    <div className="w-full max-w-sm">
      <SearchInput placeholder="Buscar em tudo…" aria-label="Buscar em tudo" shortcut="mod+k" />
    </div>
  )
}

type Nota = { id: string; number: string; customer: string }

const NOTAS: Nota[] = [
  { id: '1', number: '4813', customer: 'Clínica São Lucas' },
  { id: '2', number: '4814', customer: 'Transportes Cabo Branco' },
  { id: '3', number: '4815', customer: 'Ótica Central' },
]

const COLUNAS: Column<Nota>[] = [
  { key: 'number', header: 'Número' },
  { key: 'customer', header: 'Cliente' },
]
```

### Alimentando uma tabela

```tsx
import { DataTable, SearchInput, type Column } from '@rivocode/ui'
import { useState } from 'react'

type Nota = { id: string; number: string; customer: string }

const NOTAS: Nota[] = [
  { id: '1', number: '4813', customer: 'Clínica São Lucas' },
  { id: '2', number: '4814', customer: 'Transportes Cabo Branco' },
  { id: '3', number: '4815', customer: 'Ótica Central' },
]

const COLUNAS: Column<Nota>[] = [
  { key: 'number', header: 'Número' },
  { key: 'customer', header: 'Cliente' },
]

export function WithTable() {
  const [filter, setFilter] = useState('')
  return (
    <div className="flex w-full flex-col gap-3">
      {/* O campo é do app; a tabela só recebe o texto, sem acento atrapalhar. */}
      <SearchInput
        placeholder="Buscar por cliente ou número…"
        aria-label="Buscar nota"
        value={filter}
        onChange={(event) => setFilter(event.target.value)}
        onClear={() => setFilter('')}
        className="max-w-64"
      />
      <DataTable data={NOTAS} columns={COLUNAS} rowKey={(nota) => nota.id} filter={filter} />
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `onClear` | `(() => void)` |  | 0.4.0 | Chamado no Esc. |
| `shortcut` | `string` |  | 0.4.0 | O atalho que abre ou foca a busca, mostrado num `Kbd` dentro do campo: `"mod+k"`. |
| `size` | `"lg" \| "md" \| "sm"` |  | - | A altura do campo. |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Autocomplete](/componentes/autocomplete.md)
- [Calendar](/componentes/calendar.md)
- [Checkbox](/componentes/checkbox.md)
- [CheckboxGroup](/componentes/checkbox-group.md)
- [ColorPicker](/componentes/color-picker.md)
- [Combobox](/componentes/combobox.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)