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.
Event Triggers
See the full list of default event triggersWrapper for the Tab components.
Props
No component specific props
Event Triggers
See the full list of default event triggersAn element that serves as a label for one of the tab panels and can be activated to display that panel..
Event Triggers
See the full list of default event triggersAn element that contains the content associated with a tab.
Props
No component specific props
Event Triggers
See the full list of default event triggersWrapper for the Tab components.
Props
No component specific props
Event Triggers
See the full list of default event triggersDid you find this useful?
