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.

Basic Example

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

Styling

Default value

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

item on tab 2

Orientation

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

item on tab 1

Value

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

Tablist

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

Tab Trigger

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

Styling

Value

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

Disable

We use the disabled prop to disable the tab.

Tabs Content

Contains the content associated with each trigger.

Styling

Value

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

API Reference

rx.tabs.root

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

PropType | ValuesDefaultInteractive
default_value
str
value
str
orientation
"vertical" | "horizontal"
dir
"ltr" | "rtl"
activation_mode
"automatic" | "manual"

Event Triggers

See the full list of default event triggers
TriggerDescription
on_change Props to rename Fired when the value of the tabs changes.

rx.tabs.list

Contains the triggers that sit alongside the active content.

PropType | ValuesDefaultInteractive
size
"1" | "2"
loop
bool

rx.tabs.trigger

The button that activates its associated content.

PropType | ValuesDefaultInteractive
value
str
disabled
bool
color_scheme
"tomato" | "red" | ...

rx.tabs.content

Contains the content associated with each trigger.

PropType | ValuesDefaultInteractive
value
str
force_mount
bool