GroupBox

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

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

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

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

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.

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.