Combobox

Combobox is part of the Forms and selection group. Searchable selection primitive for filtering and choosing options.

Installation

npx bambiui add combobox --framework react

npx bambiui add combobox --framework solid

npx bambiui add combobox --framework svelte

npx bambiui add combobox --framework vue

Usage

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

export function Example() {
  return <Combobox />;
}

import { Combobox, ComboboxInput, ComboboxTrigger, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty } from "~/components/ui/combobox";

export function Example() {
  return <Combobox />;
}

<script lang="ts">
  import { Combobox, ComboboxInput, ComboboxTrigger, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty } from "$lib/components/ui/combobox";
</script>

<Combobox />

<script setup lang="ts">
import { Combobox, ComboboxInput, ComboboxTrigger, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty } from "@/components/ui/combobox";
</script>

<template>
  <Combobox />
</template>

Preview

Combobox preview should be verified in the target framework after copying the component source. Interactive behavior comes from generated public artifacts, not docs-only mock behavior.

Behavior

Use when users benefit from typing to narrow a larger option set.

Generated output uses serializable data-* attributes for state and styling. Controlled components fire bambi:<event-name> events and expect application state to update externally; uncontrolled components manage local source state and still fire events.

Accessibility

Use semantic labels, visible focus states, and keyboard interaction patterns appropriate for Combobox. Do not hide required instructions in transient UI. Verify focus movement and disabled states in the installed framework output.

Exports

Combobox, ComboboxInput, ComboboxTrigger, ComboboxContent, ComboboxList, ComboboxItem, ComboboxEmpty

Tokens

Customize tokens after installing and previewing the component. Relevant tokens include:

• --bambi-background
• --bambi-foreground
• --bambi-border
• --bambi-ring