# GroupBox

A titled frame around a set of related controls, announced as one group.

```slint
import { GroupBox } from "@glint/components/group-box.slint";
import { Checkbox } from "@glint/components/checkbox.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 320px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                GroupBox {
                    title: "Notification Channels";
                    description: "Select which channels you would like to receive updates on.";

                    VerticalLayout {
                        spacing: 10px;

                        Checkbox { label: "Email notifications"; checked: true; }
                        Checkbox { label: "SMS text alerts"; checked: false; }
                        Checkbox { label: "In-app notifications"; checked: true; }
                    }
                }
            }
        }
    }
}
```

## Usage

```slint
import { GroupBox } from "@glint/components/group-box.slint";
import { Checkbox } from "@glint/components/checkbox.slint";

export component AppWindow inherits Window {
    VerticalLayout {
        alignment: center;

        GroupBox {
            title: "Security Options";
            description: "Manage two-factor authentication and session timeouts.";

            VerticalLayout {
                spacing: 8px;
                Checkbox { label: "Require 2FA on login"; checked: true; }
                Checkbox { label: "Auto-logout after 15 minutes of inactivity"; }
            }
        }
    }
}
```

`GroupBox` renders a bordered container card with an optional legend `title` and helper `description`. Use `GroupBox` when grouping multiple related controls together, reserving `Field` for individual input/control pairs.

## Examples

### Grouping related controls

Place checkboxes, radios, or switches inside a `GroupBox` to establish visual grouping with a clear title and description.

```slint
import { GroupBox } from "@glint/components/group-box.slint";
import { Switch } from "@glint/components/switch.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 320px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                GroupBox {
                    title: "Privacy Preferences";
                    description: "Choose data collection and diagnostic sharing settings.";

                    VerticalLayout {
                        spacing: 12px;

                        Switch { label: "Share anonymous crash reports"; checked: true; }
                        Switch { label: "Personalized usage recommendations"; checked: false; }
                    }
                }
            }
        }
    }
}
```

### Simple framed container

When `description` is omitted, `GroupBox` renders a compact framed container with only its title legend.

```slint
import { GroupBox } from "@glint/components/group-box.slint";
import { Checkbox } from "@glint/components/checkbox.slint";
import { Tokens } from "@glint/theme/tokens.slint";

export component Demo inherits Window {
    width: 560px;
    height: 300px;
    background: Tokens.color-background;

    VerticalLayout {
        alignment: center;
        padding: 24px;

        HorizontalLayout {
            alignment: center;

            VerticalLayout {
                width: 360px;

                GroupBox {
                    title: "Quick Settings";

                    VerticalLayout {
                        spacing: 8px;

                        Checkbox { label: "Dark theme"; checked: true; }
                        Checkbox { label: "Compact layout"; checked: false; }
                    }
                }
            }
        }
    }
}
```

## API Reference

### Properties

| Property      | Type        | Default    | Description                                          |
| ------------- | ----------- | ---------- | ---------------------------------------------------- |
| `title`       | `in string` | no default | Frame title — the fieldset's legend; empty hides it. |
| `description` | `in string` | no default | Helper text under the title; empty hides it.         |

## Accessibility

- **Groupbox role.** The component renders with `accessible-role: groupbox`.
- **Legend and description.** The group’s accessible label is bound to `title`, and its accessible description is bound to `description`.
- **Slotted content.** Inner controls manage their own keyboard navigation and accessible roles within the group container.