Skip to main content

​
Overview

The Tabs component creates a tabbed interface where you can organize content into separate, switchable views. Each tab is created using the Tab component nested within Tabs.

​
Basic usage

import gradio as gr

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.Tab("Text"):
            gr.Textbox(label="Enter text")
        with gr.Tab("Image"):
            gr.Image(label="Upload image")
        with gr.Tab("Audio"):
            gr.Audio(label="Upload audio")

demo.launch()

​
Parameters

​
Tabs

​
selected
int | str | None
default:"None"
The currently selected tab. Can be updated to switch tabs programmatically. Uses the index (int) or label (str) of the tab.
​
visible
bool
default:"True"
If False, tabs will be hidden.
​
elem_id
str | None
default:"None"
An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
​
elem_classes
list[str] | str | None
default:"None"
An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
​
render
bool
default:"True"
If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.

​
Tab

​
label
str
The label of the tab.
​
id
int | str | None
default:"None"
An optional identifier for the tab. If provided, this will be used instead of the label when updating the selected tab.
​
elem_id
str | None
default:"None"
An optional string that is assigned as the id of this component in the HTML DOM.
​
elem_classes
list[str] | str | None
default:"None"
An optional list of strings that are assigned as the classes of this component in the HTML DOM.
​
visible
bool
default:"True"
If False, this tab will be hidden.
​
interactive
bool
default:"True"
If False, this tab cannot be selected.

​
Behavior

​
Programmatic tab switching

You can switch tabs programmatically using the selected parameter: 
import gradio as gr

with gr.Blocks() as demo:
    tabs = gr.Tabs()
    with tabs:
        with gr.Tab("First", id="first"):
            gr.Textbox(label="Tab 1 content")
        with gr.Tab("Second", id="second"):
            gr.Textbox(label="Tab 2 content")
    
    btn = gr.Button("Go to Second Tab")
    btn.click(lambda: gr.Tabs(selected="second"), outputs=tabs)

demo.launch()

​
Examples

​
Multi-step form

Create a wizard-style interface: 
import gradio as gr

def next_tab():
    return gr.Tabs(selected=1)

with gr.Blocks() as demo:
    with gr.Tabs() as tabs:
        with gr.Tab("Step 1: Personal Info", id=0):
            gr.Textbox(label="Name")
            gr.Textbox(label="Email")
            next_btn1 = gr.Button("Next")
        
        with gr.Tab("Step 2: Preferences", id=1):
            gr.Dropdown(["Option A", "Option B"], label="Choice")
            gr.Slider(0, 100, label="Amount")
            next_btn2 = gr.Button("Next")
        
        with gr.Tab("Step 3: Review", id=2):
            gr.Markdown("Review your submission")
            gr.Button("Submit")
    
    next_btn1.click(lambda: gr.Tabs(selected=1), outputs=tabs)
    next_btn2.click(lambda: gr.Tabs(selected=2), outputs=tabs)

demo.launch()

​
Different input modes

Let users choose between different input methods: 
import gradio as gr

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.Tab("Upload File"):
            file_input = gr.File(label="Choose a file")
            process_file_btn = gr.Button("Process")
        
        with gr.Tab("Enter URL"):
            url_input = gr.Textbox(label="Enter URL")
            fetch_btn = gr.Button("Fetch")
        
        with gr.Tab("Paste Text"):
            text_input = gr.Textbox(label="Paste your text", lines=10)
            process_text_btn = gr.Button("Process")
    
    output = gr.Textbox(label="Result")

demo.launch()

​
Conditional tab visibility

Show or hide tabs based on user input: 
import gradio as gr

def toggle_advanced(show):
    return gr.Tab(visible=show)

with gr.Blocks() as demo:
    show_advanced = gr.Checkbox(label="Show advanced options")
    
    with gr.Tabs():
        with gr.Tab("Basic"):
            gr.Textbox(label="Input")
            gr.Button("Submit")
        
        advanced_tab = gr.Tab("Advanced", visible=False)
        with advanced_tab:
            gr.Slider(label="Parameter 1")
            gr.Slider(label="Parameter 2")
    
    show_advanced.change(
        toggle_advanced,
        inputs=show_advanced,
        outputs=advanced_tab
    )

demo.launch()

​
Tab selection event

Respond when a user switches tabs: 
import gradio as gr

def on_tab_select(evt: gr.SelectData):
    return f"You selected tab: {evt.value}"

with gr.Blocks() as demo:
    with gr.Tabs() as tabs:
        with gr.Tab("First"):
            gr.Markdown("First tab content")
        with gr.Tab("Second"):
            gr.Markdown("Second tab content")
        with gr.Tab("Third"):
            gr.Markdown("Third tab content")
    
    output = gr.Textbox(label="Selected tab")
    tabs.select(on_tab_select, outputs=output)

demo.launch()

​
Nested tabs

Create hierarchical organization: 
import gradio as gr

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.Tab("Data Processing"):
            with gr.Tabs():
                with gr.Tab("CSV"):
                    gr.File(label="Upload CSV")
                with gr.Tab("JSON"):
                    gr.File(label="Upload JSON")
                with gr.Tab("Excel"):
                    gr.File(label="Upload Excel")
        
        with gr.Tab("Visualization"):
            with gr.Tabs():
                with gr.Tab("Chart"):
                    gr.Plot(label="Chart")
                with gr.Tab("Table"):
                    gr.Dataframe(label="Table")

demo.launch()

​
Model comparison

Compare outputs from different models: 
import gradio as gr

with gr.Blocks() as demo:
    prompt = gr.Textbox(label="Prompt")
    generate_btn = gr.Button("Generate")
    
    with gr.Tabs():
        with gr.Tab("GPT-4"):
            gpt4_output = gr.Textbox(label="GPT-4 Response", lines=10)
        with gr.Tab("Claude"):
            claude_output = gr.Textbox(label="Claude Response", lines=10)
        with gr.Tab("Llama"):
            llama_output = gr.Textbox(label="Llama Response", lines=10)
        with gr.Tab("Comparison"):
            gr.Markdown("Side-by-side comparison")

demo.launch()

​
Events

​
select

Triggered when a tab is selected: 
import gradio as gr

with gr.Blocks() as demo:
    with gr.Tabs() as tabs:
        with gr.Tab("A"):
            gr.Textbox()
        with gr.Tab("B"):
            gr.Textbox()
    
    tabs.select(lambda: print("Tab changed"))

demo.launch()

​
Methods

​
update

Update the Tabs component properties: 
import gradio as gr

with gr.Blocks() as demo:
    with gr.Tabs() as tabs:
        with gr.Tab("First", id=0):
            gr.Textbox()
        with gr.Tab("Second", id=1):
            gr.Textbox()
    
    gr.Button("Select First").click(
        lambda: gr.Tabs(selected=0),
        outputs=tabs
    )

demo.launch()

​
Notes

Use the id parameter on Tab components when you need to reference specific tabs programmatically. This is more stable than using labels, which might change.
Tabs are great for reducing visual clutter in complex interfaces. Group related functionality together to keep your UI clean and organized.
The select event provides access to the selected tab’s information through gr.SelectData, which includes the tab’s value (label or id).