leptos-shadcn-ui/docs/components/api/combobox.md

Combobox Component API

A searchable select component with autocomplete functionality.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-combobox = "0.7"

use shadcn_ui_leptos_combobox::Combobox;

---

Import

use shadcn_ui_leptos_combobox::{
    Combobox,
    ComboboxTrigger,
    ComboboxContent,
    ComboboxInput,
    ComboboxItem,
    ComboboxEmpty
};

---

Component API

Combobox

Root component managing combobox state.

Prop	Type	Default	Description
value	Signal<Option<String>>	Required	Selected value
on_change	Option<Callback<Option<String>>>	None	Change handler
options	Vec<String>	Required	Available options
filterable	Signal<bool>	true	Enable search filtering

---

Usage Examples

Basic Combobox

use leptos::prelude::*;
use shadcn_ui_leptos_combobox::*;

#[component]
pub fn MyComponent() -> impl IntoView {
    let (value, set_value) = signal(None);
    let options = vec![
        "Apple".to_string(),
        "Banana".to_string(),
        "Orange".to_string(),
    ];

    view! {
        <Combobox
            value=value.into()
            on_change=Some(Callback::new(move |v| set_value.set(v)))
            options=options
        >
            <ComboboxTrigger>
                <button>"Select fruit"</button>
            </ComboboxTrigger>
            <ComboboxContent>
                <ComboboxInput placeholder="Search..." />
                <ComboboxEmpty>"No results found"</ComboboxEmpty>
                // Items rendered automatically
            </ComboboxContent>
        </Combobox>
    }
}

---

CSS Classes

.combobox-content {
    z-50 min-w-[8rem] overflow-hidden rounded-md
    border bg-popover p-1 text-popover-foreground
    shadow-md
}

.combobox-item {
    relative flex cursor-pointer select-none items-center
    rounded-sm px-2 py-1.5 text-sm outline-none
    transition-colors hover:bg-accent hover:text-accent-foreground
}

---

Accessibility

Keyboard Navigation

Key	Action
Type	Filter options
Arrow Keys	Navigate options
Enter	Select option
Escape	Close dropdown

---

TypeScript API

interface ComboboxProps {
  value: string | null;
  onChange?: (value: string | null) => void;
  options: string[];
  filterable?: boolean;
}

export const Combobox: React.FC<ComboboxProps>;

---

Source: packages/leptos/combobox/src/default.rs