Skip to main content

​
Import

from reflex_ui import tabs

​
Description

A tabs component for organizing content into multiple panels, where only one panel is visible at a time. Includes keyboard navigation and an animated indicator.

​
Usage

tabs.root(
    tabs.list(
        tabs.tab("Tab 1", value="tab1"),
        tabs.tab("Tab 2", value="tab2"),
        tabs.tab("Tab 3", value="tab3"),
        tabs.indicator()
    ),
    tabs.panel(
        rx.text("Content for tab 1"),
        value="tab1"
    ),
    tabs.panel(
        rx.text("Content for tab 2"),
        value="tab2"
    ),
    tabs.panel(
        rx.text("Content for tab 3"),
        value="tab3"
    ),
    default_value="tab1"
)

​
API

​
tabs.root() / tabs()

Root container that groups tabs and panels. Renders a <div> element.
​
default_value
str | int
default:"0"
Initial selected tab value (uncontrolled). When null, no tab is selected
​
value
Var[str | int] | str | int
Currently selected tab value (controlled). When null, no tab is selected
​
orientation
Literal['horizontal', 'vertical']
default:"'horizontal'"
Layout flow direction of the tabs
​
render_
Component
Custom root component

​
Event Handlers

​
on_value_change
EventHandler[str | dict]
Called when a new tab is selected. Receives the tab value

​
tabs.list()

Container for the tab buttons. Renders a <div> element.
​
activate_on_focus
bool
default:"False"
Whether to automatically activate tabs when focused with arrow keys. When false, tabs require Enter or Space to activate
​
loop_focus
bool
default:"True"
Whether to loop keyboard focus back to first item when reaching the end with arrow keys

​
tabs.tab()

Individual tab button. Renders a <button> element.
​
value
str | int
The value of the tab. When not specified, uses the child position index
​
native_button
bool
default:"True"
Whether to render a native button element when using render prop
​
disabled
bool
default:"False"
Whether the tab is disabled
​
render_
Component
Custom tab component

​
tabs.indicator()

Visual indicator showing the active tab position. Renders a <span> element.
​
render_before_hydration
bool
default:"False"
Whether to render before React hydrates. Minimizes time the indicator is invisible after SSR
​
render_
Component
Custom indicator component

​
tabs.panel()

Panel displayed when corresponding tab is active. Renders a <div> element.
​
value
str | int
required
The value of the panel. Shown when tab with same value is selected. Required for server-side rendering
​
keep_mounted
bool
default:"False"
Whether to keep the panel HTML element in DOM while hidden
​
render_
Component
Custom panel component

​
Class Names

Access default class names via tabs.class_names:
  • ROOT: Root container styling with flex layout
  • LIST: Tab list container with background and padding
  • TAB: Individual tab button styling with states
  • INDICATOR: Animated indicator showing active tab
  • PANEL: Panel container styling

​
Keyboard Navigation

  • Arrow Keys: Navigate between tabs
  • Enter/Space: Activate focused tab (when activate_on_focus=False)
  • Home: Focus first tab
  • End: Focus last tab

​
Example

import reflex as rx
from reflex_ui import tabs

def my_component():
    return tabs.root(
        tabs.list(
            tabs.tab("Overview", value="overview"),
            tabs.tab("Details", value="details"),
            tabs.tab("Settings", value="settings"),
            tabs.indicator()
        ),
        tabs.panel(
            rx.box(
                rx.heading("Overview", size="4"),
                rx.text("General information here"),
                padding="4"
            ),
            value="overview"
        ),
        tabs.panel(
            rx.box(
                rx.heading("Details", size="4"),
                rx.text("Detailed information here"),
                padding="4"
            ),
            value="details"
        ),
        tabs.panel(
            rx.box(
                rx.heading("Settings", size="4"),
                rx.text("Settings controls here"),
                padding="4"
            ),
            value="settings"
        ),
        default_value="overview"
    )

​
State Management

import reflex as rx
from reflex_ui import tabs

class TabState(rx.State):
    current_tab: str = "tab1"
    
    def change_tab(self, value: str):
        self.current_tab = value

def controlled_tabs():
    return tabs.root(
        tabs.list(
            tabs.tab("First", value="tab1"),
            tabs.tab("Second", value="tab2"),
            tabs.indicator()
        ),
        tabs.panel("First content", value="tab1"),
        tabs.panel("Second content", value="tab2"),
        value=TabState.current_tab,
        on_value_change=TabState.change_tab
    )

Build docs developers (and LLMs) love

Get started for freeTalk to us