Combobox

Beta

Un Select con buscador — se escribe para filtrar y se elige de la lista. Simple o múltiple con chips.

registry/ds/combobox.tsx

Carrera

15 carreras. Escribí las primeras letras.

import { Combobox } from "@/registry/ds/combobox";

const carreras = ["Administración", "Arquitectura", "Biología", "Ciencia de Datos", "Comunicación", "Contador Público", "Derecho", "Diseño Gráfico", "Economía", "Enfermería", "Ingeniería Civil", "Ingeniería en Sistemas", "Medicina", "Psicología", "Relaciones Internacionales"].map((c) => ({ label: c, value: c.toLowerCase().replace(/\s+/g, "-") }));

export default function ComboboxBasic() {
  return (
    <div className="w-80">
      <Combobox label="Carrera" options={carreras} placeholder="Escribí para buscar…" hint="15 carreras. Escribí las primeras letras." />
    </div>
  );
}

Select o Combobox

Opciones	Usá
2–5, conviene verlas todas	Radio
6–15	Select
Más de 15, o la persona ya sabe qué busca	Combobox
Valores libres con sugerencias (buscador)	Combobox, con `inputValue` controlado

Selección múltiple

Los elegidos quedan como chips dentro del campo; Backspace sobre el campo vacío quita el último. El menú no se cierra al elegir.

Materias a cursar

Hasta 6 por semestre.

import { Combobox } from "@/registry/ds/combobox";

const materias = ["Cálculo I", "Cálculo II", "Física I", "Física II", "Programación", "Álgebra", "Química", "Estadística", "Inglés técnico"].map((m) => ({ label: m, value: m }));

export default function ComboboxMultiple() {
  return (
    <div className="w-96">
      <Combobox multiple label="Materias a cursar" options={materias} defaultValue={["Cálculo I", "Programación"]} placeholder="Agregar materia…" hint="Hasta 6 por semestre." />
    </div>
  );
}

Contenido

El placeholder invita a escribir: "Escribí para buscar…", no "Seleccionar".
La ayuda dice cuántas opciones hay o cómo buscar ("Escribí las primeras letras").
Sin coincidencias: un mensaje corto y, si aplica, cómo crear lo que falta.
Opciones ordenadas alfabéticamente, salvo que haya un orden más útil.

Medidas

El campo mide igual que Input; el menú, igual que Select.

Parte	Medida
Chip	alto 24 · px 10 / 4 · `radius-full` · Text xs / Medium · gap 6
Botones borrar / abrir	24
Campo múltiple	alto mínimo 40, crece con las filas de chips

Tokens

Parte	Propiedad	Token
Campo y menú	Todos los estados	`—`
Chip	Fondo → resaltado	`bg/surface`
Chip	Texto	`text/default`
Chip · quitar	Icono	`icon/subtle`
Borrar / abrir	Icono → hover	`icon/subtle`
Sin resultados	Texto	`text/muted`

Instalación

npx shadcn@latest add https://polen.cdc.cool/r/combobox.json

Playground

Configurá el componente y copiá el snippet: se genera del mismo estado que renderiza el preview.

Carrera

12 carreras. Escribí las primeras letras.

size

labelplaceholderAyudaErrorMúltiplerequireddisabled

<Combobox label="Carrera" options={carreras} placeholder="Escribí para buscar…" hint="12 carreras. Escribí las primeras letras." />

Uso

<Combobox label="Carrera" options={carreras} value={carrera} onValueChange={setCarrera} />
<Combobox multiple label="Materias" options={materias} value={ids} onValueChange={setIds} />

Props

Sobre Base UI Combobox. Comparte size, label, hint, error, required y disabled con Input.

Prop	Tipo	Default	Descripción
`options`	`{ label, value, disabled? }[]`	—	Las opciones. Requerido.
`multiple`	`boolean`	false	Chips dentro del campo; el valor pasa a string[].
`value / defaultValue`	`string \| null · string[]`	—	Valor controlado o inicial.
`onValueChange`	`(value) => void`	—	Al elegir o quitar.
`placeholder`	`string`	"Buscar…"	Invita a escribir.
`emptyText`	`string`	"Sin resultados"	Mensaje sin coincidencias.
`name · aria-label`	`string`	—	Formularios nativos · nombre accesible sin label.

Tecla	Qué hace
`Escribir`	Filtra y abre la lista.
`↑↓`	Mueve el resaltado.
`Enter`	Elige el resaltado.
`Esc`	Cierra la lista.
`Backspace`	Con el campo vacío (múltiple): quita el último chip.
`←`	Desde el inicio del campo (múltiple): recorre los chips.

role="combobox" con aria-expanded, aria-controls y aria-activedescendant; la lista es un listbox con option y aria-selected.
Los chips se anuncian con su nombre y cómo quitarlos; el botón ✕ tiene nombre.
La cantidad de resultados se anuncia al filtrar.