Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding

Library

/

Chakra

/

Disclosure

/

Tabs

Tab components allow you display content in multiple pages within a container. These page are organized by a tab list and the corresponding tab panel can take in children components if needed.

Text from tab 1.

rx.chakra.tabs(
    rx.chakra.tab_list(
        rx.chakra.tab("Tab 1"),
        rx.chakra.tab("Tab 2"),
        rx.chakra.tab("Tab 3"),
    ),
    rx.chakra.tab_panels(
        rx.chakra.tab_panel(
            rx.chakra.text("Text from tab 1.")
        ),
        rx.chakra.tab_panel(
            rx.chakra.checkbox("Text from tab 2.")
        ),
        rx.chakra.tab_panel(
            rx.chakra.button(
                "Text from tab 3.", color="black"
            )
        ),
    ),
    bg="black",
    color="white",
    shadow="lg",
)

You can create a tab component using the shorthand syntax. Pass a list of tuples to the items prop. Each tuple should contain a label and a panel.

Text from tab 1.

rx.chakra.tabs(
    items=[
        ("Tab 1", rx.chakra.text("Text from tab 1.")),
        ("Tab 2", rx.chakra.checkbox("Text from tab 2.")),
        (
            "Tab 3",
            rx.chakra.button(
                "Text from tab 3.", color="black"
            ),
        ),
    ],
    bg="black",
    color="white",
    shadow="lg",
)

An accessible tabs component that provides keyboard interactions and ARIA attributes described in the WAI-ARIA Tabs Design Pattern. Tabs, provides context and state for all components.

PropTypeDescriptionValues
alignLiteral

The alignment of the tabs ("center" | "end" | "start").

default_indexint

The initial index of the selected tab (in uncontrolled mode).

id_str

The id of the tab.

is_fittedbool

If true, tabs will stretch to width of the tablist.

is_lazybool

Performance booster. If true, rendering of the tab panel's will be deferred until it is selected.

is_manualbool

If true, the tabs will be manually activated and display its panel by pressing Space or Enter. If false, the tabs will be automatically activated and their panel is displayed when they receive focus.

orientationstr

The orientation of the tab list.

variantLiteral

"line" | "enclosed" | "enclosed-colored" | "soft-rounded" | "solid-rounded" | "unstyled"

color_schemeLiteral

The color scheme of the tabs.

indexint

Index of the selected tab (in controlled mode).

Event Triggers

See the full list of default event triggers

Wrapper for the Tab components.

Props

No component specific props

An element that serves as a label for one of the tab panels and can be activated to display that panel..

PropTypeDescriptionValues
is_disabledbool

If true, the Tab won't be toggleable.

is_selectedbool

If true, the Tab will be selected.

id_str

The id of the tab.

panel_idstr

The id of the panel.

An element that contains the content associated with a tab.

Props

No component specific props

Wrapper for the Tab components.

Props

No component specific props

Did you find this useful?

HomeGalleryChangelogIntroductionHosting