Tabs

A tabbed interface for organizing content into panels. Arrow keys navigate between tabs.

Primitive: TabsARIA: role="tablist" + role="tab" + role="tabpanel"Keyboard: Arrow keys, Home, End

Account Settings

Manage your account details and preferences.

Name

tabs.rs

use stratum_leptos::*;

view! {
    <TabList>
        <Tab value="account">"Account"</Tab>
        <Tab value="password">"Password"</Tab>
        <Tab value="notifications">"Notifications"</Tab>
    </TabList>
    <TabPanel value="account">
        // Account content
    </TabPanel>
    <TabPanel value="password">
        // Password content
    </TabPanel>
}

Installation

stratum add tabs

Props

Prop	Type	Default	Description
value	Option<String>	None	Controlled active tab
default_value	Option<String>	None	Initial active tab
orientation	Orientation	Horizontal	Tab direction: Horizontal, Vertical
on_value_change	Option<Callback<String>>	None	Fires when active tab changes

Accessibility

TabList: role="tablist" with aria-orientation.
Tab: role="tab" with aria-selected and aria-controls pointing to its panel.
TabPanel: role="tabpanel" with aria-labelledby pointing to its tab.
Arrow keys navigate tabs. Home/End jump to first/last.

Source

Primitive: tabs.rs
Styled: tabs.rs