Tabs

A set of layered panels that display one at a time, activated by corresponding tab triggers.

Update your profile details.

Display name

Installation

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

Usage

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

#[component]
pub fn MyTabs() -> impl IntoView {
    view! {
        <tabs::Root default_value="account" class="w-full max-w-md">
            <tabs::List class="flex border-b border-border">
                <tabs::Trigger
                    value="account"
                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px data-[state=active]:border-primary data-[state=inactive]:border-transparent"
                >
                    "Account"
                </tabs::Trigger>
                <tabs::Trigger
                    value="password"
                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px data-[state=active]:border-primary data-[state=inactive]:border-transparent"
                >
                    "Password"
                </tabs::Trigger>
            </tabs::List>
            <tabs::Content value="account" class="p-4 text-sm">
                "Manage your account settings here."
            </tabs::Content>
            <tabs::Content value="password" class="p-4 text-sm">
                "Change your password here."
            </tabs::Content>
        </tabs::Root>
    }
}

RootWith

Use RootWith to access TabsState inline via the let: binding — useful for driving external UI from the active tab value.

Active: account

Manage your account settings here.

Change your password here.

Configure your preferences here.

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

#[component]
pub fn MyTabs() -> impl IntoView {
    view! {
        <tabs::RootWith default_value="account" class="w-full max-w-md" let:t>
            <p class="mb-2 text-sm text-muted-foreground">
                {move || format!("Active tab: {}", t.value.get().unwrap_or_default())}
            </p>
            <tabs::List class="flex border-b border-border">
                <tabs::Trigger
                    value="account"
                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px data-[state=active]:border-primary data-[state=inactive]:border-transparent"
                >
                    "Account"
                </tabs::Trigger>
                <tabs::Trigger
                    value="password"
                    class="px-4 py-2 text-sm font-medium border-b-2 -mb-px data-[state=active]:border-primary data-[state=inactive]:border-transparent"
                >
                    "Password"
                </tabs::Trigger>
            </tabs::List>
            <tabs::Content value="account" class="p-4 text-sm">
                "Manage your account settings here."
            </tabs::Content>
            <tabs::Content value="password" class="p-4 text-sm">
                "Change your password here."
            </tabs::Content>
        </tabs::RootWith>
    }
}

API Reference

Root / RootWith

Name	Type	Default	Description
class	String	""	CSS class applied to the root wrapper element.
value	Option<String>	None	The initially active tab value.
orientation	Orientation	Horizontal	The axis along which tabs are arranged.
activation_mode	ActivationMode	Automatic	Whether arrow key navigation also activates tabs (Automatic) or only moves focus (Manual).
on_value_change	Option<Callback<String>>	None	Callback fired when the active tab changes.

List

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

Trigger

Name	Type	Default	Description
value	String		The value this tab trigger activates.
class	String	""	CSS class applied to the tab trigger button.
disabled	bool	false	When true, the tab cannot be activated.

Content

Name	Type	Default	Description
value	String		The tab value whose panel this renders.
class	String	""	CSS class applied to the tab panel element.

Orientation

Name	Type	Default	Description
Horizontal	Orientation	default	Tabs are arranged left-to-right. Arrow Left/Right navigates.
Vertical	Orientation		Tabs are arranged top-to-bottom. Arrow Up/Down navigates.

ActivationMode

Name	Type	Default	Description
Automatic	ActivationMode	default	Arrow key navigation both moves focus and activates the tab.
Manual	ActivationMode		Arrow key navigation only moves focus; Enter or Space activates the tab.

Data Attributes

Attribute	Description
data-state	"active" when the tab is selected; "inactive" otherwise. Present on Trigger and Content.
data-disabled	Present on Trigger when the tab is disabled.
data-orientation	"horizontal" or "vertical". Present on Root, Trigger, and Content.

Keyboard Navigation

Key	Description
`ArrowRight / ArrowDown`	Moves focus to the next tab (ArrowRight for horizontal, ArrowDown for vertical). Activates it in Automatic mode.
`ArrowLeft / ArrowUp`	Moves focus to the previous tab. Activates it in Automatic mode.
`Home`	Moves focus to the first tab. Activates it in Automatic mode.
`End`	Moves focus to the last tab. Activates it in Automatic mode.
`Enter / Space`	Activates the focused tab (primarily useful in Manual activation mode).