> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/gradio-app/gradio/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```python theme={null}
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

<ParamField path="selected" type="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.
</ParamField>

<ParamField path="visible" type="bool" default="True">
  If False, tabs will be hidden.
</ParamField>

<ParamField path="elem_id" type="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.
</ParamField>

<ParamField path="elem_classes" type="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.
</ParamField>

<ParamField path="render" type="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.
</ParamField>

### Tab

<ParamField path="label" type="str">
  The label of the tab.
</ParamField>

<ParamField path="id" type="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.
</ParamField>

<ParamField path="elem_id" type="str | None" default="None">
  An optional string that is assigned as the id of this component in the HTML DOM.
</ParamField>

<ParamField path="elem_classes" type="list[str] | str | None" default="None">
  An optional list of strings that are assigned as the classes of this component in the HTML DOM.
</ParamField>

<ParamField path="visible" type="bool" default="True">
  If False, this tab will be hidden.
</ParamField>

<ParamField path="interactive" type="bool" default="True">
  If False, this tab cannot be selected.
</ParamField>

## Behavior

### Programmatic tab switching

You can switch tabs programmatically using the `selected` parameter:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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:

```python theme={null}
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

<Note>
  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.
</Note>

<Tip>
  Tabs are great for reducing visual clutter in complex interfaces. Group related functionality together to keep your UI clean and organized.
</Tip>

<Tip>
  The `select` event provides access to the selected tab's information through `gr.SelectData`, which includes the tab's value (label or id).
</Tip>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.