Combobox

Select con búsqueda integrada. Ideal para listas largas donde el usuario necesita filtrar.

---

Import

import {
  Combobox,
  ComboboxTrigger,
  ComboboxContent,
  ComboboxInput,
  ComboboxList,
  ComboboxEmpty,
  ComboboxGroup,
  ComboboxItem,
} from '@imansi/ui';

---

Uso básico

<Combobox>
  <ComboboxTrigger>Seleccioná un país</ComboboxTrigger>
  <ComboboxContent>
    <ComboboxInput placeholder="Buscar país..." />
    <ComboboxList>
      <ComboboxEmpty>No encontrado.</ComboboxEmpty>
      <ComboboxItem value="ar">Argentina</ComboboxItem>
      <ComboboxItem value="br">Brasil</ComboboxItem>
      <ComboboxItem value="cl">Chile</ComboboxItem>
      <ComboboxItem value="uy">Uruguay</ComboboxItem>
    </ComboboxList>
  </ComboboxContent>
</Combobox>

---

Controlado

import { useState } from 'react';

export function SelectorPais() {
  const [pais, setPais] = useState('');

  return (
    <Combobox value={pais} onValueChange={setPais}>
      {/* ... */}
    </Combobox>
  );
}

---

Con grupos

<ComboboxList>
  <ComboboxGroup heading="Sudamérica">
    <ComboboxItem value="ar">Argentina</ComboboxItem>
    <ComboboxItem value="br">Brasil</ComboboxItem>
  </ComboboxGroup>
  <ComboboxGroup heading="Europa">
    <ComboboxItem value="es">España</ComboboxItem>
    <ComboboxItem value="fr">Francia</ComboboxItem>
  </ComboboxGroup>
</ComboboxList>

---

Props

Combobox

Prop	Tipo	Default	Descripción
value	string	—	Valor seleccionado (controlado)
onValueChange	(value: string) => void	—	Callback al seleccionar
open	boolean	—	Estado de apertura
onOpenChange	(open: boolean) => void	—	Callback

---

Accesibilidad

• Búsqueda por teclado mientras escribís
• Flechas ↑↓ navegan
• Enter selecciona
• Escape cierra