Group

Overview

The Group component is a layout container that groups components together. Unlike Row and Column, Group doesn’t add extra padding or gaps between components, making it useful for creating tight, compact layouts.

Basic usage

import gradio as gr

with gr.Blocks() as demo:
    with gr.Group():
        gr.Textbox(label="First Name")
        gr.Textbox(label="Last Name")
        gr.Textbox(label="Email")

demo.launch()

Parameters

bool

default:"True"

If False, group 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

Visual grouping

Group creates a subtle visual border around components without adding spacing:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### User Information")
    
    with gr.Group():
        gr.Textbox(label="Username")
        gr.Textbox(label="Email")
        gr.Textbox(label="Phone")
    
    gr.Markdown("### Preferences")
    
    with gr.Group():
        gr.Checkbox(label="Email notifications")
        gr.Checkbox(label="SMS notifications")

demo.launch()

Examples

Form sections

Create visually distinct form sections:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Registration Form")
    
    with gr.Group():
        gr.Markdown("### Personal Details")
        gr.Textbox(label="First Name")
        gr.Textbox(label="Last Name")
        gr.Textbox(label="Date of Birth")
    
    with gr.Group():
        gr.Markdown("### Contact Information")
        gr.Textbox(label="Email")
        gr.Textbox(label="Phone")
        gr.Textbox(label="Address")
    
    with gr.Group():
        gr.Markdown("### Account Settings")
        gr.Textbox(label="Username")
        gr.Textbox(label="Password", type="password")
        gr.Textbox(label="Confirm Password", type="password")
    
    gr.Button("Submit")

demo.launch()

Compact input groups

Create tightly grouped inputs:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### Date Range Filter")
    
    with gr.Group():
        with gr.Row():
            gr.Textbox(label="Start Date", placeholder="YYYY-MM-DD")
            gr.Textbox(label="End Date", placeholder="YYYY-MM-DD")
    
    gr.Markdown("### Price Range")
    
    with gr.Group():
        with gr.Row():
            gr.Number(label="Min Price")
            gr.Number(label="Max Price")
    
    gr.Button("Apply Filters")

demo.launch()

Radio button groups

Group related radio options:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### Survey")
    
    with gr.Group():
        gr.Markdown("**How satisfied are you with our service?**")
        gr.Radio(
            ["Very Satisfied", "Satisfied", "Neutral", "Unsatisfied", "Very Unsatisfied"],
            label="Satisfaction"
        )
    
    with gr.Group():
        gr.Markdown("**How likely are you to recommend us?**")
        gr.Slider(0, 10, label="Likelihood (0-10)")
    
    with gr.Group():
        gr.Markdown("**Additional comments**")
        gr.Textbox(label="Comments", lines=5)
    
    gr.Button("Submit Survey")

demo.launch()

Grouped controls

Group related control elements:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("### Image Editor")
    
    gr.Image(label="Image")
    
    with gr.Group():
        gr.Markdown("**Adjustments**")
        gr.Slider(-100, 100, value=0, label="Brightness")
        gr.Slider(-100, 100, value=0, label="Contrast")
        gr.Slider(-100, 100, value=0, label="Saturation")
    
    with gr.Group():
        gr.Markdown("**Effects**")
        gr.Checkbox(label="Grayscale")
        gr.Checkbox(label="Sepia")
        gr.Checkbox(label="Blur")
    
    with gr.Row():
        gr.Button("Reset")
        gr.Button("Apply")

demo.launch()

Comparison layout

Group before/after or comparison sections:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Image Comparison")
    
    with gr.Row():
        with gr.Group():
            gr.Markdown("### Before")
            gr.Image(label="Original")
            gr.Textbox(label="Original size")
        
        with gr.Group():
            gr.Markdown("### After")
            gr.Image(label="Processed")
            gr.Textbox(label="New size")

demo.launch()

Settings panel

Organize settings into logical groups:

import gradio as gr

with gr.Blocks() as demo:
    gr.Markdown("# Application Settings")
    
    with gr.Group():
        gr.Markdown("### Display")
        gr.Dropdown(["Light", "Dark", "Auto"], label="Theme")
        gr.Slider(50, 200, value=100, label="UI Scale (%)")
        gr.Checkbox(label="Show animations")
    
    with gr.Group():
        gr.Markdown("### Performance")
        gr.Checkbox(label="Enable GPU acceleration")
        gr.Slider(1, 8, value=4, label="Max parallel jobs")
        gr.Checkbox(label="Cache results")
    
    with gr.Group():
        gr.Markdown("### Privacy")
        gr.Checkbox(label="Send anonymous usage data")
        gr.Checkbox(label="Enable crash reports")
        gr.Checkbox(label="Auto-update")
    
    with gr.Row():
        gr.Button("Reset to Defaults")
        gr.Button("Save Settings")

demo.launch()

Mixed component groups

Combine different component types:

import gradio as gr

with gr.Blocks() as demo:
    with gr.Group():
        gr.Markdown("### Model Configuration")
        model = gr.Dropdown(
            ["GPT-4", "GPT-3.5", "Claude"],
            label="Model"
        )
        temp = gr.Slider(0, 2, value=0.7, label="Temperature")
        max_tokens = gr.Slider(1, 4000, value=500, label="Max tokens")
        system_prompt = gr.Textbox(
            label="System Prompt",
            lines=3,
            placeholder="You are a helpful assistant..."
        )

demo.launch()

Methods

update

Update the group’s properties:

import gradio as gr

with gr.Blocks() as demo:
    group = gr.Group(visible=True)
    with group:
        gr.Textbox(label="Hidden content")
        gr.Textbox(label="More hidden content")
    
    toggle_btn = gr.Button("Toggle Group")
    visible_state = gr.State(True)
    
    def toggle(visible):
        new_visible = not visible
        return gr.Group(visible=new_visible), new_visible
    
    toggle_btn.click(
        toggle,
        inputs=visible_state,
        outputs=[group, visible_state]
    )

demo.launch()

Notes

The Group component adds a subtle border and background to visually separate grouped components, but doesn’t add internal spacing like Row or Column do.

Use Group when you want to create visual separation between sections without the structural layout constraints of Row or Column.

Group is perfect for creating compact forms where you want components to be close together while still maintaining visual organization.

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Overview

Basic usage

Parameters

Behavior

Visual grouping

Examples

Form sections

Compact input groups

Radio button groups

Grouped controls

Comparison layout

Settings panel

Mixed component groups

Methods

update

Notes

​Overview

​Basic usage

​Parameters

​Behavior

​Visual grouping

​Examples

​Form sections

​Compact input groups

​Radio button groups

​Grouped controls

​Comparison layout

​Settings panel

​Mixed component groups

​Methods

​update

​Notes

Overview

Basic usage

Parameters

Behavior

Visual grouping

Examples

Form sections

Compact input groups

Radio button groups

Grouped controls

Comparison layout

Settings panel

Mixed component groups

Methods

update

Notes