Collapsible

An interactive component that can be expanded or collapsed to show or hide content.

Starred repositories

leptos-rs/leptos

Installation

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

Usage

use std::time::Duration;
use leptos::prelude::*;
use biji_ui::components::collapsible;

#[component]
pub fn MyCollapsible() -> impl IntoView {
    view! {
        <collapsible::Root class="w-full">
            <collapsible::Trigger class="flex justify-between items-center py-3 w-full text-sm font-medium">
                "Toggle content"
            </collapsible::Trigger>
            <collapsible::Content
                class="text-sm"
                show_class="opacity-100 transition duration-150 ease-in"
                hide_class="opacity-0 transition duration-200 ease-out"
                hide_delay={Duration::from_millis(200)}
            >
                "Hidden content revealed on toggle."
            </collapsible::Content>
        </collapsible::Root>
    }
}

RootWith

Use <RootWith> when you need direct access to CollapsibleState inside the children. The let:c binding exposes c.open as a reactive signal for driving UI that depends on the open state — without CSS data-attribute selectors.

Starred repositories

Show

leptos-rs/leptos

use std::time::Duration;
use leptos::prelude::*;
use biji_ui::components::collapsible;

#[component]
pub fn MyCollapsible() -> impl IntoView {
    view! {
        <collapsible::RootWith class="w-full sm:max-w-[70%] space-y-2" let:c>
            <div class="flex justify-between items-center">
                <span class="text-sm font-semibold">"Starred repositories"</span>
                <div class="flex items-center gap-2">
                    <span class="text-xs text-muted-foreground">
                        {move || if c.open.get() { "Hide" } else { "Show" }}
                    </span>
                    <collapsible::Trigger class="flex items-center justify-center w-9 h-9 rounded-lg hover:bg-muted transition-colors outline-none focus:ring-2 focus:ring-ring data-[state=open]:[&>svg]:rotate-180">
                        // chevron icon
                    </collapsible::Trigger>
                </div>
            </div>
            <collapsible::Content
                show_class="opacity-100 transition duration-150 ease-in"
                hide_class="opacity-0 transition duration-200 ease-out"
                hide_delay={Duration::from_millis(200)}
            >
                // items
            </collapsible::Content>
        </collapsible::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the root element.
open	bool	false	The initial open state of the collapsible.
disabled	bool	false	When true, prevents the collapsible from being toggled.

Trigger

Name	Type	Default	Description
class	String	""	CSS class applied to the trigger button.

Content

Name	Type	Default	Description
class	String	""	CSS class applied to the content wrapper.
show_class	String	""	CSS class applied when the content is visible.
hide_class	String	""	CSS class applied while the content is hiding (during the transition out).
hide_delay	Duration	200ms	How long to wait before unmounting the content after closing begins. Should match your CSS transition duration.

Data Attributes

Attribute	Description
data-state	"open" when expanded; "closed" when collapsed. Present on Root and Trigger.
data-disabled	Present on Root and Trigger when the collapsible is disabled.

Keyboard Navigation

Key	Description
`Enter / Space`	Toggles the collapsible open or closed when the trigger is focused.