Tabs
Create tabbed interfaces with Radix UI in Webstudio.
Based on Radix Tabs
The Tabs component displays a set of panels with content that are shown one at a time. Users can switch between panels by clicking on tab triggers.
When to Use
Use Tabs for:
Organizing related content into sections
Settings pages with multiple categories
Product pages with details, reviews, and specifications
Any content that can be logically grouped
Structure
The Tabs component consists of several parts:
Tabs
The root component that manages which tab is active
Tabs List
Container for all the tab triggers
Tab Trigger
The clickable tab button
Tab Content
The panel content shown when a tab is active
How to Use
Drag a Tabs component from Components > Radix onto your canvas
The component comes with two tabs pre-configured
To add more tabs:
Duplicate a Tab Trigger inside the Tabs List
Duplicate a Tab Content panel
Tab Triggers and Tab Contents are connected by their order in the Navigator
The first Trigger shows the first Content, second shows second, etc.
Using with Collections
When generating tabs dynamically with a Collection, you need to provide a unique value property for both the Tab Trigger and Tab Content:
Add the
valueproperty to Tab Trigger: Settings > Properties & Attributes > "+"Add the same
valueproperty to the corresponding Tab ContentBind a unique identifier (like an ID or slug) from your data to both
Properties
Some commonly used properties (see the Settings panel for all available options):
value
The currently active tab. Use this to control which tab is shown on the canvas
Styling States
Some common states (you can also create custom states):
Active (
[data-state=active]) - The currently selected tab triggerInactive (
[data-state=inactive]) - Unselected tab triggers
Related
Accordion – Vertically stacked expandable sections
Collapsible – Single expandable panel
Collection – Generate tabs dynamically from data
Navigation Menu – Navigation with dropdowns and links
Last updated
Was this helpful?