# Combobox Un combobox combina un input de texto con una lista filtrable de opciones. Es la elección preferida cuando hay muchas alternativas y la persona puede escribir para encontrarlas más rápido. ```tsx import { Combobox } from "@/components/ui/combobox"; const options = [ { label: "Civil", value: "civil" }, { label: "Laboral", value: "laboral" }, { label: "Comercial", value: "comercial" }, { label: "Familia", value: "familia" }, { label: "Tributario", value: "tributario" }, ]; ``` ## Uso ### Cuándo usar combobox - La lista de opciones supera lo que un radio group o un dropdown puede mostrar cómodamente. - Las personas conocen el valor que buscan y escribir es más rápido que recorrer la lista. - El conjunto de opciones puede crecer o cambiar con el tiempo. ### Cuándo no usarlo - Hay pocas opciones fijas y visibles: usa radio group o dropdown. - La persona necesita comparar varios valores a la vez: usa list o tabla. - Se requiere entrada libre sin lista sugerida: usa input. ## Comportamiento ### Clearable Cuando la persona puede limpiar rápidamente la selección, activa `clearable`. Útil en filtros y campos opcionales. ```tsx ``` ### Estricto vs freeform Por defecto el combobox acepta valores libres además de las opciones sugeridas. Activa `disableFreeSolo` para restringir el valor a las opciones del catálogo (si la persona sale del campo con un valor inválido, se limpia). ```tsx ``` ## Variantes ### Estado searching - Cuando la fuente de opciones es remota, muestra un estado de carga dentro del popover (ej. un texto 'Buscando…' o un spinner inline) y un mensaje claro cuando no hay coincidencias. - Si no hay coincidencias, ofrece acciones: crear el valor o limpiar la búsqueda. ## Accesibilidad ### Label y descripción - Todo combobox debe tener un label visible o aria-label. - Si hay placeholder, no lo uses como reemplazo del label: el placeholder desaparece al escribir. - Conecta errores cerca del control con aria-describedby apuntando al mensaje. ### Teclado - Flecha abajo abre la lista y mueve la opción enfocada hacia abajo. - Enter selecciona la opción enfocada; Esc cierra la lista sin cambiar el valor. - Tab cierra la lista; el valor escrito se mantiene. ## Contenido ### Placeholder y opciones - El placeholder describe la acción esperada, no el formato del dato. - Las opciones deben ser cortas, sin contexto redundante. - Ordena por relevancia o alfabéticamente, no por orden de creación.