Accordion

Overview

The Accordion component creates collapsible sections that can be expanded or collapsed by the user. It’s useful for organizing content and reducing visual clutter by hiding less frequently accessed options.

Basic usage

import gradio as gr

with gr.Blocks() as demo:
    with gr.Accordion("Advanced Settings"):
        gr.Slider(label="Temperature")
        gr.Slider(label="Max tokens")
        gr.Checkbox(label="Use cache")

demo.launch()

Parameters

str

The label of the accordion which is displayed when the accordion is collapsed.

bool

default:"False"

If True, the accordion is expanded by default. If False, it is collapsed.

bool

default:"True"

If False, accordion 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.

Behavior

Default state

By default, accordions are collapsed. You can change this:

import gradio as gr

with gr.Blocks() as demo:
    # This accordion starts expanded
    with gr.Accordion("Quick Settings", open=True):
        gr.Checkbox(label="Enable feature")
    
    # This accordion starts collapsed
    with gr.Accordion("Advanced Settings", open=False):
        gr.Slider(label="Fine-tune parameter")

demo.launch()

Examples

Organizing settings

Group related settings in collapsible sections:

import gradio as gr

with gr.Blocks() as demo:
    gr.Textbox(label="Prompt")
    
    with gr.Accordion("Model Settings"):
        gr.Dropdown(["GPT-4", "GPT-3.5", "Claude"], label="Model")
        gr.Slider(0, 2, label="Temperature")
        gr.Slider(1, 4000, label="Max tokens")
    
    with gr.Accordion("Output Settings"):
        gr.Checkbox(label="Stream response")
        gr.Checkbox(label="Show timestamps")
        gr.Number(label="Response count")
    
    gr.Button("Generate")

demo.launch()

Help sections

Provide optional help text without cluttering the interface:

import gradio as gr

with gr.Blocks() as demo:
    gr.Textbox(label="Email")
    
    with gr.Accordion("ℹ️ Email format help", open=False):
        gr.Markdown("""
        ### Email Format Guidelines
        - Use a valid email address format
        - Example: user@example.com
        - Multiple emails should be comma-separated
        """)
    
    gr.Textbox(label="Password")
    
    with gr.Accordion("ℹ️ Password requirements", open=False):
        gr.Markdown("""
        ### Password Requirements
        - At least 8 characters
        - Include uppercase and lowercase letters
        - Include at least one number
        - Include at least one special character
        """)

demo.launch()

Progressive disclosure

Show basic options first, hide advanced ones:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### Image Generator")
    
    # Basic options always visible
    prompt = gr.Textbox(label="Prompt")
    num_images = gr.Slider(1, 4, value=1, label="Number of images")
    
    # Advanced options hidden by default
    with gr.Accordion("Advanced Options", open=False):
        guidance_scale = gr.Slider(1, 20, value=7.5, label="Guidance scale")
        steps = gr.Slider(10, 100, value=50, label="Steps")
        seed = gr.Number(label="Seed (leave empty for random)")
        negative_prompt = gr.Textbox(label="Negative prompt")
    
    generate_btn = gr.Button("Generate")
    output = gr.Gallery(label="Generated images")

demo.launch()

Programmatically toggle accordion

Open or close accordions based on user actions:

import gradio as gr

def check_custom(choice):
    if choice == "Custom":
        return gr.Accordion(open=True)
    return gr.Accordion(open=False)

with gr.Blocks() as demo:
    mode = gr.Radio(
        ["Default", "Quick", "Custom"],
        label="Mode",
        value="Default"
    )
    
    custom_accordion = gr.Accordion("Custom Settings", open=False)
    with custom_accordion:
        gr.Slider(label="Parameter 1")
        gr.Slider(label="Parameter 2")
        gr.Checkbox(label="Enable feature X")
    
    mode.change(
        check_custom,
        inputs=mode,
        outputs=custom_accordion
    )

demo.launch()

Multiple accordions

Create a FAQ-style interface:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Frequently Asked Questions")
    
    with gr.Accordion("What is Gradio?", open=False):
        gr.Markdown("""
        Gradio is a Python library that allows you to quickly create 
        web interfaces for your machine learning models.
        """)
    
    with gr.Accordion("How do I install Gradio?", open=False):
        gr.Markdown("""
        You can install Gradio using pip:
        ```bash
        pip install gradio

""") with gr.Accordion(“Can I customize the appearance?”, open=False): gr.Markdown(""" Yes! Gradio supports custom CSS and theming to match your brand. """) with gr.Accordion(“Is Gradio free?”, open=False): gr.Markdown(""" Yes, Gradio is open source and free to use under the Apache 2.0 license. """) demo.launch()

### Nested accordions

Create hierarchical organization:

```python
import gradio as gr

with gr.Blocks() as demo:
    with gr.Accordion("Configuration", open=True):
        gr.Textbox(label="API Key")
        
        with gr.Accordion("Network Settings", open=False):
            gr.Textbox(label="Proxy URL")
            gr.Number(label="Timeout (seconds)")
        
        with gr.Accordion("Advanced Features", open=False):
            gr.Checkbox(label="Enable caching")
            gr.Checkbox(label="Debug mode")

demo.launch()

Data sections

Organize different data inputs:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### Data Analysis Tool")
    
    with gr.Accordion("📊 Upload Data", open=True):
        gr.File(label="CSV File")
        gr.Checkbox(label="Has header row")
    
    with gr.Accordion("🔧 Processing Options", open=True):
        gr.CheckboxGroup(
            ["Remove duplicates", "Fill missing values", "Normalize"],
            label="Preprocessing steps"
        )
    
    with gr.Accordion("📈 Visualization Settings", open=False):
        gr.Dropdown(
            ["Bar", "Line", "Scatter", "Box"],
            label="Chart type"
        )
        gr.ColorPicker(label="Color scheme")
    
    gr.Button("Analyze")

demo.launch()

Methods

update

Update the accordion’s properties:

import gradio as gr

with gr.Blocks() as demo:
    accordion = gr.Accordion("Settings", open=False)
    with accordion:
        gr.Slider(label="Value")
    
    expand_btn = gr.Button("Expand Settings")
    expand_btn.click(
        lambda: gr.Accordion(open=True),
        outputs=accordion
    )
    
    collapse_btn = gr.Button("Collapse Settings")
    collapse_btn.click(
        lambda: gr.Accordion(open=False),
        outputs=accordion
    )

demo.launch()

Notes

Accordions are useful for progressive disclosure - showing basic options upfront while keeping advanced features accessible but hidden until needed.

Use descriptive labels for your accordions. Adding emoji icons can help users quickly identify the purpose of each section.

Consider starting with the most commonly used accordion open (open=True) to guide users to the most important settings.

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Overview

Basic usage

Parameters

Behavior

Default state

Examples

Organizing settings

Help sections

Progressive disclosure

Programmatically toggle accordion

Multiple accordions

Data sections

Methods

update

Notes

​Overview

​Basic usage

​Parameters

​Behavior

​Default state

​Examples

​Organizing settings

​Help sections

​Progressive disclosure

​Programmatically toggle accordion

​Multiple accordions

​Data sections

​Methods

​update

​Notes

Overview

Basic usage

Parameters

Behavior

Default state

Examples

Organizing settings

Help sections

Progressive disclosure

Programmatically toggle accordion

Multiple accordions

Data sections

Methods

update

Notes