Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Disclosure

/

Tabs

Tabs are a set of layered sections of content—known as tab panels that are displayed one at a time. They facilitate the organization and navigation between sets of content that share a connection and exist at a similar level of hierarchy.

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(
        rx.text("item on tab 1"),
        value="tab1",
    ),
    rx.tabs.content(
        rx.text("item on tab 2"),
        value="tab2",
    ),
)

The tabs component is made up of a rx.tabs.root which groups rx.tabs.list and rx.tabs.content parts.

We use the default_value prop to set a default active tab, this will select the specified tab by default.

item on tab 2

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(
        rx.text("item on tab 1"),
        value="tab1",
    ),
    rx.tabs.content(
        rx.text("item on tab 2"),
        value="tab2",
    ),
    default_value="tab2",
)

We use orientation prop to set the orientation of the tabs component to vertical or horizontal. By default, the orientation will be set to horizontal. Setting this value will change both the visual orientation and the functional orientation.

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(
        rx.text("item on tab 1"),
        value="tab1",
    ),
    rx.tabs.content(
        rx.text("item on tab 2"),
        value="tab2",
    ),
    default_value="tab1",
    orientation="vertical",
)

item on tab 1

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(
        rx.text("item on tab 1"),
        value="tab1",
    ),
    rx.tabs.content(
        rx.text("item on tab 2"),
        value="tab2",
    ),
    default_value="tab1",
    orientation="horizontal",
)

We use the value prop to specify the controlled value of the tab that we want to activate. This property should be used in conjunction with the on_change event argument.

tab1 clicked !

items on tab 1

class TabsState(rx.State):
    """The app state."""

    value = "tab1"
    tab_selected = ""

    def change_value(self, val):
        self.tab_selected = f"{val} clicked!"
        self.value = val


def index() -> rx.Component:
    return rx.container(
        rx.flex(
            rx.text(f"{TabsState.value}  clicked !"),
            rx.tabs.root(
                rx.tabs.list(
                    rx.tabs.trigger("Tab 1", value="tab1"),
                    rx.tabs.trigger("Tab 2", value="tab2"),
                ),
                rx.tabs.content(
                    rx.text("items on tab 1"),
                    value="tab1",
                ),
                rx.tabs.content(
                    rx.text("items on tab 2"),
                    value="tab2",
                ),
                default_value="tab1",
                value=TabsState.value,
                on_change=lambda x: TabsState.change_value(
                    x
                ),
            ),
            direction="column",
            spacing="2",
        ),
        padding="2em",
        font_size="2em",
        text_align="center",
    )

The Tablist is used to list the respective tabs to the tab component

This is the button that activates the tab's associated content. It is typically used in the Tablist

We use the value prop to assign a unique value that associates the trigger with content.

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
        rx.tabs.trigger("Tab 3", value="tab3"),
    ),
)

We use the disabled prop to disable the tab.

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
        rx.tabs.trigger(
            "Tab 3", value="tab3", disabled=True
        ),
    ),
)

Contains the content associated with each trigger.

We use the value prop to assign a unique value that associates the content with a trigger.

rx.tabs.root(
    rx.tabs.list(
        rx.tabs.trigger("Tab 1", value="tab1"),
        rx.tabs.trigger("Tab 2", value="tab2"),
    ),
    rx.tabs.content(
        rx.text("item on tab 1"),
        value="tab1",
    ),
    rx.tabs.content(
        rx.text("item on tab 2"),
        value="tab2",
    ),
    default_value="tab1",
    orientation="vertical",
)

Set of content sections to be displayed one at a time.

PropTypeDescriptionValues
default_valuestr

The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.

valuestr

The controlled value of the tab that should be active. Use when you need to control the state of the tabs.

orientationLiteral

The orientation of the tabs.

dirLiteral

Reading direction of the tabs.

activation_modeLiteral

The mode of activation for the tabs. "automatic" will activate the tab when focused. "manual" will activate the tab when clicked.

Event Triggers

TriggerDescription
on_change

Props to rename Fired when the value of the tabs changes.

Contains the triggers that sit alongside the active content.

PropTypeDescriptionValues
sizeUnion

Tabs size "1" - "2"

loopbool

When true, the tabs will loop when reaching the end.

The button that activates its associated content.

PropTypeDescriptionValues
valuestr

The value of the tab. Must be unique for each tab.

disabledbool

Whether the tab is disabled

color_schemeLiteral

The color of the line under the tab when active.

Contains the content associated with each trigger.

PropTypeDescriptionValues
valuestr

The value of the tab. Must be unique for each tab.

force_mountbool

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

← AccordionCond →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting