Formularios

Autocomplete

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

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.

Ciudad

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

Generadas del TypeScript del paquete. Solo las props propias: las heredadas del primitivo de Base UI o del elemento HTML están en la línea «hereda de».

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

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 Input