Tabs

A layout component that creates tabbed interfaces for organizing content into separate views.

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).