Filtered by typing
Type “an” to see the matches, or “zz” to see the empty state.
Search by name.
import { ComboBox, ComboBoxItem } from '@arbol-ai/ui';
const CONTACTS = [
{ id: 'cnt_1', name: 'Ana Torres' },
{ id: 'cnt_2', name: 'Andrés Gómez' },
{ id: 'cnt_3', name: 'Beatriz Rojas' },
{ id: 'cnt_4', name: 'Carlos Pérez' },
{ id: 'cnt_5', name: 'Lucía Martínez' },
];
<ComboBox
className="max-w-xs"
defaultItems={CONTACTS}
description="Search by name."
label="Contact"
placeholder="Type a name"
>
{(contact) => <ComboBoxItem>{contact.name}</ComboBoxItem>}
</ComboBox>Sections
import { ComboBox, ComboBoxItem, ComboBoxSection } from '@arbol-ai/ui';
<ComboBox className="max-w-xs" label="Clinic">
<ComboBoxSection title="Bogotá">
<ComboBoxItem id="norte">Clínica Norte</ComboBoxItem>
<ComboBoxItem id="chapinero">Sede Chapinero</ComboBoxItem>
</ComboBoxSection>
<ComboBoxSection title="Medellín">
<ComboBoxItem id="poblado">Sede El Poblado</ComboBoxItem>
</ComboBoxSection>
</ComboBox>Source
The examples above are src/components/combo-box/combo-box.examples.tsx, which the library’s tests render too.