Command

A searchable command palette for navigating and executing actions via keyboard or mouse.

Installation

biji-ui = { version = "0.5.0", features = ["command"] }

Usage

use leptos::prelude::*;
use biji_ui::components::command;

#[component]
pub fn MyCommand() -> impl IntoView {
    view! {
        <command::Root class="overflow-hidden w-full max-w-sm rounded-lg border shadow-md border-border">
            <command::Input
                placeholder="Search..."
                class="py-2 px-3 w-full text-sm border-b outline-none border-border bg-background"
            />
            <command::List class="overflow-y-auto p-1 max-h-64">
                <command::Empty>
                    <div class="py-6 text-sm text-center text-muted-foreground">
                        "No results found."
                    </div>
                </command::Empty>
                <command::Group label="Actions" label_class="px-2 py-1 text-xs font-semibold text-muted-foreground">
                    <command::Item
                        value="new-file"
                        class="flex items-center py-1.5 px-2 text-sm rounded-sm cursor-pointer outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
                        on_select={Callback::new(|val| leptos::logging::log!("selected: {val}"))}
                    >
                        "New File"
                    </command::Item>
                    <command::Item
                        value="new-folder"
                        class="flex items-center py-1.5 px-2 text-sm rounded-sm cursor-pointer outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
                    >
                        "New Folder"
                    </command::Item>
                </command::Group>
            </command::List>
        </command::Root>
    }
}

Text Highlighting

Use command::HighlightedText inside an item to automatically highlight the portion of the label that matches the current search query.

use leptos::prelude::*;
use biji_ui::components::command;

#[component]
pub fn MyHighlightedCommand() -> impl IntoView {
    view! {
        <command::Root class="overflow-hidden w-full max-w-sm rounded-lg border shadow-md border-border">
            <command::Input
                placeholder="Search..."
                class="py-2 px-3 w-full text-sm border-b outline-none border-border bg-background"
            />
            <command::List class="overflow-y-auto p-1 max-h-64">
                <command::Empty>
                    <div class="py-6 text-sm text-center text-muted-foreground">
                        "No results found."
                    </div>
                </command::Empty>
                <command::Item
                    value="accordion"
                    class="flex items-center py-1.5 px-2 text-sm rounded-sm cursor-pointer outline-none data-[highlighted]:bg-accent"
                >
                    <command::HighlightedText
                        label="Accordion"
                        highlight_class="bg-yellow-200/80 dark:bg-yellow-500/30 rounded"
                    />
                </command::Item>
                <command::Item
                    value="dialog"
                    class="flex items-center py-1.5 px-2 text-sm rounded-sm cursor-pointer outline-none data-[highlighted]:bg-accent"
                >
                    <command::HighlightedText
                        label="Dialog"
                        highlight_class="bg-yellow-200/80 dark:bg-yellow-500/30 rounded"
                    />
                </command::Item>
            </command::List>
        </command::Root>
    }
}

API Reference

Root

Name	Type	Default	Description
class	String	""	CSS class applied to the root wrapper element.

Input

Name	Type	Default	Description
class	String	""	CSS class applied to the search input element.
placeholder	String	""	Placeholder text shown when the input is empty.

List

Name	Type	Default	Description
class	String	""	CSS class applied to the list container element.

Group

Name	Type	Default	Description
class	String	""	CSS class applied to the group container element.
label	Option<String>	None	Optional heading text rendered above the group items.
label_class	String	""	CSS class applied to the group label element.

Item

Name	Type	Default	Description
value	String		Unique string value identifying this item. Also used as the default label for filtering.
label	Option<String>	None	Override the text used for filtering. Defaults to value when not provided.
class	String	""	CSS class applied to the item element.
disabled	bool	false	When true, the item is excluded from navigation and cannot be selected.
on_select	Option<Callback<String>>	None	Callback fired with the item's value when it is selected via click or Enter.

HighlightedText

Name	Type	Default	Description
label	String		The full text string to display. The matched portion is wrapped in a highlighted span.
highlight_class	String	""	CSS class applied to the span wrapping the matched substring.

Data Attributes

Attribute	Description
data-highlighted	Present on Item when it is the currently focused/highlighted item.
data-disabled	Present on Item when the item is disabled.

Keyboard Navigation

Key	Description
`ArrowDown`	Moves focus to the next visible item, wrapping to the first.
`ArrowUp`	Moves focus to the previous visible item, wrapping to the last.
`Home`	Moves focus to the first visible item.
`End`	Moves focus to the last visible item.
`Enter`	Selects the focused item and fires on_select.