PrimitiveDisponible

Combobox

Selección con búsqueda y lista operable mediante teclado.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/combobox.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ComboboxEmpty,
} from '@/components/ui/combobox';

export default function Demo() {
  const items = ['React', 'Vue', 'Svelte', 'Angular'];
  return (
    <Combobox items={items}>
      <ComboboxInput
        aria-label="Choose a framework"
        placeholder="Search frameworks"
      />
      <ComboboxContent>
        <ComboboxEmpty>No framework found.</ComboboxEmpty>
        <ComboboxList>
          {(item: string) => (
            <ComboboxItem key={item} value={item}>
              {item}
            </ComboboxItem>
          )}
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Comprueba cerrado, abierto, opción resaltada, seleccionado y deshabilitado cuando el componente los admita.
Los diálogos y menús deben poder abrirse con teclado. Escape cierra los overlays no persistentes y devuelve el foco al disparador. Tooltip y Hover Card también deben mostrarse al enfocar.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
items	array	—	Items available for filtering and selection.
value	item or null	uncontrolled	Controlled selection.
onValueChange	function	—	Reports selection changes.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.