Tabs

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

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.

bool

default:"True"

If False, tabs will be hidden.

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.

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.

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

str

The label of the tab.

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.

str | None

default:"None"

An optional string that is assigned as the id of this component in the HTML DOM.

list[str] | str | None

default:"None"

An optional list of strings that are assigned as the classes of this component in the HTML DOM.

bool

default:"True"

If False, this tab will be hidden.

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

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Tabs

Overview

Basic usage

Parameters

Tabs

Tab

Behavior

Programmatic tab switching

Examples

Multi-step form

Different input modes

Conditional tab visibility

Tab selection event

Nested tabs

Model comparison

Events

select

Methods

update

Notes

​Overview

​Basic usage

​Parameters

​Tabs

​Tab

​Behavior

​Programmatic tab switching

​Examples

​Multi-step form

​Different input modes

​Conditional tab visibility

​Tab selection event

​Nested tabs

​Model comparison

​Events

​select

​Methods

​update

​Notes

Overview

Basic usage

Parameters

Tabs

Tab

Behavior

Programmatic tab switching

Examples

Multi-step form

Different input modes

Conditional tab visibility

Tab selection event

Nested tabs

Model comparison

Events

select

Methods

update

Notes