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

# Group

> A layout component that groups components together visually without adding extra padding.

## 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

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

<ParamField path="visible" type="bool" default="True">
  If False, group 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>

## Behavior

### Visual grouping

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

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

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

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

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

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

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

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

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

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

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

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

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


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