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
If False, group will be hidden.
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.
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
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()
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()
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.