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.

rc.tabs(
    rc.tab_list(
        rc.tab("Tab 1"),
        rc.tab("Tab 2"),
        rc.tab("Tab 3"),
    ),
    rc.tab_panels(
        rc.tab_panel(rc.text("Text from tab 1.")),
        rc.tab_panel(rc.checkbox("Text from tab 2.")),
        rc.tab_panel(
            rc.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.

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

rc.Tabs

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.

Prop	Type \| Values	Default
`align`	`"center" \| "end" \| "start"`
`default_index`	`int`
`id_`	`str`
`is_fitted`	`bool`
`is_lazy`	`bool`
`is_manual`	`bool`
`orientation`	`str`
`variant`	`"line" \| "enclosed" \| "enclosed-colored" \| ...`
`color_scheme`	`"none" \| "gray" \| "red" \| ...`
`index`	`int`