Tabs

A set of layered sections of content, displayed one at a time. Composed of Tabs, TabsList, TabsTrigger, and TabsContent.

When to use

• Switching between related views (Account / Password, Overview / Details).
• Organizing settings into categories.

API

Tabs::new()

A root container. Add TabsList and TabsContent children.

Method	Type	Description
.child(child)	impl IntoElement	Append a TabsList or TabsContent

TabsList::new()

A container for the tab triggers.

Method	Type	Description
.child(child)	impl IntoElement	Append a TabsTrigger

TabsTrigger::new(id, label)

A button that toggles a tab.

Method	Type	Default	Description
.active(active)	bool	false	Whether this trigger is active
.on_click(fn)	Fn(&ClickEvent, &mut Window, &mut App)	—	Click handler

TabsContent::new(id)

A container for conditional tab content.

Method	Type	Default	Description
.active(active)	bool	false	Whether this content is visible
.child(child)	impl IntoElement	—	Add content

Usage

use gpui::{Component, div, prelude::*};
use components::{Tabs, TabsContent, TabsList, TabsTrigger};

div().child(Component::new(
    Tabs::new()
        .child(Component::new(
            TabsList::new()
                .child(Component::new(
                    TabsTrigger::new("tab-1", "Tab 1")
                        .active(this.active_tab == "tab-1")
                        .on_click(cx.listener(|this, _, _, cx| {
                            this.active_tab = "tab-1".to_string();
                            cx.notify();
                        })),
                )),
        ))
        .child(Component::new(
            TabsContent::new("tab-1")
                .active(this.active_tab == "tab-1")
                .child("Content for Tab 1"),
        )),
))

Copy the source

crates/components/src/tabs.rs — self-contained, stateless, and free to modify.