# Autocomplete

> Texto libre con sugerencias: el valor es lo que se escribe, esté o no en la lista.

```tsx
import { Autocomplete, AutocompleteCollection, AutocompleteContent, AutocompleteEmpty, … } from "sebs7n-ui/autocomplete"
```

## Ejemplos

### Texto libre con sugerencias

Un valor que no está en la lista también vale.

```tsx
import { Autocomplete, AutocompleteContent, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList } from "sebs7n-ui/autocomplete"
import { Label } from "sebs7n-ui/label"

function Basico() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="ciudad">Ciudad</Label>
      <Autocomplete items={CIUDADES}>
        <AutocompleteInput id="ciudad" placeholder="Escribí o elegí" />
        <AutocompleteContent>
          <AutocompleteEmpty />
          <AutocompleteList>
            {(item: string) => (
              <AutocompleteItem key={item} value={item}>
                {item}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  )
}
```

## Props

### Autocomplete

Hereda las props de `Autocomplete.Root`.

Sin props propias: pasa todo al primitivo.

### AutocompleteCollection

Sin props propias: pasa todo al primitivo.

### AutocompleteContent

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AutocompleteEmpty

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AutocompleteGroup

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AutocompleteInput

Hereda las props de `Autocomplete.Input`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `disabled` | `boolean` | — | Whether the component should ignore user interaction. |
| `groupClassName` | `string` | — | — |
| `labels` | `{ clear?: string; trigger?: string }` | — | — |
| `showClear` | `boolean` | `true` | — |
| `showTrigger` | `boolean` | `false` | Sin chevron por defecto: es un campo de texto. |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | — |
| `className` | `string` | — | — |

### AutocompleteItem

Hereda las props de `Autocomplete.Item`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AutocompleteLabel

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AutocompleteList

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AutocompleteSeparator

Hereda las props de `Autocomplete.Separator`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### AutocompleteStatus

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `labels` | `{ loading?: string }` | — | — |
| `loading` | `boolean` | — | Búsqueda async en curso: fila con spinner. |
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| Escribir | Filtra y abre las sugerencias. |
| ↑ ↓ | Recorre. |
| Enter | Toma la sugerencia resaltada; si no hay ninguna, se queda el texto escrito. |
| Escape | Cierra sin elegir. |

## Accesibilidad

- Mismas piezas que `Combobox` con prefijo `Autocomplete`, así que hereda `ComboboxStatus`, `ComboboxEmpty` y los estados del input.
- `AutocompleteItem` no lleva check: no hay «elegido», hay «sugerido».

## Reglas de uso

- Ciudad, dirección, etiqueta libre. Si el valor tiene que existir en un catálogo, `Combobox`.
- `value`/`onValueChange` son strings, no objetos.

## Relacionados

[combobox](/docs/components/combobox.md) · [input](/docs/components/input.md)