Einführung

Ein struktureller Layout-Container, der verwandte Formularsteuerelemente unter einem nativen <fieldset> gruppiert, komplett mit einem barrierefreien Legend-Element, unterstützendem Hilfetext und Validierungsfehlermeldungen. Er dient als wesentlicher semantischer Anker für komplexe Benutzereingabeformulare und überträgt deaktivierte, ungültige und erforderliche Status automatisch an verschachtelte Feldsteuerelemente.

Die Fieldset-Komponente ist vollständig als fieldset-Block im Page Builder integriert und ermöglicht es Content-Autoren und Entwicklern, mehrteilige Profilabschnitte, Adressformulare oder Abrechnungsmodule direkt innerhalb des CMS zu strukturieren.

Verwendung über den CMS Page Builder (JSON)

Diese Beispiele veranschaulichen, wie Content-Editoren Fieldset-Gruppen innerhalb der JSON-Seitenschemata (content/pages/*.json) binden und strukturieren.

1. Standard-Kontoinformationen-Gruppe

Eine Standard-Benutzerprofilgruppe mit obligatorischen verschachtelten Namensfeldern. Verfügt über eine aktive Legende und Hilfestatus-Text.

{
  "type": "fieldset",
  "legend": "Account Information",
  "helperText": "Configure your primary account details.",
  "required": true,
  "children": [
    {
      "type": "field",
      "label": "Full Name",
      "placeholder": "Jane Doe",
      "interactive": true
    },
    {
      "type": "field",
      "label": "Email Address",
      "placeholder": "jane@example.com",
      "interactive": true
    }
  ]
}

2. Ungültige Gruppe mit Fehlermeldung

Zeigt, wie das Fieldset Validierungsfehlermeldungen anzeigt, wenn eine Gruppenanforderung verletzt wird. Das Eingeben eines errorText löst automatisch ungültige Zustände auf allen untergeordneten Feldern aus.

{
  "type": "fieldset",
  "legend": "Billing Credentials",
  "helperText": "Enter your card billing details.",
  "errorText": "A valid postal code is required.",
  "children": [
    {
      "type": "field",
      "label": "Cardholder Name",
      "placeholder": "Jane Doe",
      "interactive": true
    },
    {
      "type": "field",
      "label": "Postal Code",
      "placeholder": "90210",
      "invalid": true,
      "interactive": true
    }
  ]
}

3. Deaktivierter Abrechnungsoptionen-Block

Zeigt einen vollständig deaktivierten Versandparameter-Abschnitt. Das Deaktivieren des übergeordneten Fieldset sperrt automatisch jedes verschachtelte Element.

{
  "type": "fieldset",
  "legend": "Shipping Address",
  "helperText": "Unavailable during local holidays.",
  "disabled": true,
  "children": [
    {
      "type": "field",
      "label": "Street",
      "placeholder": "123 Main St",
      "interactive": true
    },
    {
      "type": "field",
      "label": "Apt #",
      "placeholder": "4B",
      "interactive": true
    }
  ]
}

CMS-Konfigurationsreferenz

Diese Felder ordnen sich direkt den Sveltia-CMS-Blockeigenschaften unter public/admin/config.yml oder den Page-Builder-Konfigurationen zu:

Entwicklerhinweise & Barrierefreiheit

• Hydration-Frei (Nur Statisch): Fieldset ist eine semantische Layout-Komponente, die als rein statische Komponente (Tier 3) gekennzeichnet ist. Sie wird vollständig als standardmäßiges server-seitiges HTML gerendert und ist von clientseitigen Hydration-Skripten ausgenommen.
• Kontext-Propagation: Sie nutzt Context-Provider, um disabled-, invalid- und required-Zustände nach unten zu propagieren. Direkte untergeordnete Komponentenblöcke (wie Field und Textarea) hören diesen Kontext automatisch ab und erben Gruppeneigenschaften, wodurch doppelte Schlüsseldeklarationen entfallen.
• WAI-ARIA-Konformität: Fieldset kompiliert strikt zu semantischen HTML-<fieldset>-Containern, die direkte <legend>-Elemente enthalten, und erfüllt damit die barrierefreien Browser-Überschriftenanforderungen.