Combobox
Searchable dropdown for selecting from a filterable list of options.
Basic
<HStack justify="center">
<Combobox>
<ComboboxInput placeholder="Select a framework..." />
<ComboboxContent>
<ComboboxList>
<ComboboxEmpty>No framework found.</ComboboxEmpty>
<ComboboxItem value="react">React</ComboboxItem>
<ComboboxItem value="vue">Vue</ComboboxItem>
<ComboboxItem value="angular">Angular</ComboboxItem>
<ComboboxItem value="svelte">Svelte</ComboboxItem>
<ComboboxItem value="solid">Solid</ComboboxItem>
</ComboboxList>
</ComboboxContent>
</Combobox>
</HStack> With groups
<HStack justify="center">
<Combobox>
<ComboboxInput placeholder="Select a location..." />
<ComboboxContent>
<ComboboxList>
<ComboboxEmpty>No location found.</ComboboxEmpty>
<ComboboxGroup>
<ComboboxLabel>North America</ComboboxLabel>
<ComboboxItem value="new-york">New York</ComboboxItem>
<ComboboxItem value="los-angeles">Los Angeles</ComboboxItem>
<ComboboxItem value="toronto">Toronto</ComboboxItem>
</ComboboxGroup>
<ComboboxSeparator />
<ComboboxGroup>
<ComboboxLabel>Europe</ComboboxLabel>
<ComboboxItem value="london">London</ComboboxItem>
<ComboboxItem value="paris">Paris</ComboboxItem>
<ComboboxItem value="berlin">Berlin</ComboboxItem>
</ComboboxGroup>
<ComboboxSeparator />
<ComboboxGroup>
<ComboboxLabel>Asia</ComboboxLabel>
<ComboboxItem value="tokyo">Tokyo</ComboboxItem>
<ComboboxItem value="singapore">Singapore</ComboboxItem>
<ComboboxItem value="hong-kong">Hong Kong</ComboboxItem>
</ComboboxGroup>
</ComboboxList>
</ComboboxContent>
</Combobox>
</HStack> With clear button
<HStack justify="center">
<Combobox>
<ComboboxInput placeholder="Select a status..." showClear />
<ComboboxContent>
<ComboboxList>
<ComboboxEmpty>No status found.</ComboboxEmpty>
<ComboboxItem value="open">Open</ComboboxItem>
<ComboboxItem value="in-progress">In Progress</ComboboxItem>
<ComboboxItem value="pending">Pending</ComboboxItem>
<ComboboxItem value="completed">Completed</ComboboxItem>
<ComboboxItem value="cancelled">Cancelled</ComboboxItem>
</ComboboxList>
</ComboboxContent>
</Combobox>
</HStack> Disabled
<HStack justify="center">
<Combobox>
<ComboboxInput placeholder="Select an option..." disabled />
<ComboboxContent>
<ComboboxList>
<ComboboxItem value="option-1">Option 1</ComboboxItem>
<ComboboxItem value="option-2">Option 2</ComboboxItem>
</ComboboxList>
</ComboboxContent>
</Combobox>
</HStack> With disabled items
<HStack justify="center">
<Combobox>
<ComboboxInput placeholder="Select a plan..." />
<ComboboxContent>
<ComboboxList>
<ComboboxEmpty>No plan found.</ComboboxEmpty>
<ComboboxItem value="free">Free</ComboboxItem>
<ComboboxItem value="starter">Starter</ComboboxItem>
<ComboboxItem value="pro">Pro</ComboboxItem>
<ComboboxItem value="enterprise" disabled>Enterprise (Coming soon)</ComboboxItem>
</ComboboxList>
</ComboboxContent>
</Combobox>
</HStack>