Browse documentation

UI / Foundations / Reference

Group: make related controls understandable together

Reference explicit group naming and the distinction between Group and a native fieldset.

Group supplies a semantic group; connect its name explicitly with label or labelledBy. Use a native fieldset and legend when controls form one browser form group.

import { html } from "@typed/template";
import * as Group from "@typed/ui/Group";

export const PreviewControls = Group.Group({
  label: "Preview controls",
  content: html`<button type="button">Previous page</button>
    <button type="button">Next page</button>`,
});

Grouping does not choose child names or validation behavior. Group API.