Introduction

Un conteneur de mise en page structurel qui regroupe les contrôles de formulaire associés sous un <fieldset> natif, complet avec une légende accessible, un texte d'aide de support et des messages d'erreur de validation. Il sert d'ancre sémantique essentielle pour les formulaires de saisie utilisateur complexes, propageant automatiquement les états désactivé, invalide et requis vers les contrôles de champ imbriqués.

Le composant Fieldset est entièrement intégré en tant que bloc fieldset dans le Page Builder, permettant aux auteurs de contenu et aux développeurs de structurer facilement des sections de profil à entrées multiples, des formulaires d'adresse ou des modules de facturation directement dans le CMS.

Utilisation via le CMS Page Builder (JSON)

Ces exemples illustrent comment les éditeurs de contenu lient et structurent des groupes fieldset dans les schémas de page JSON (content/pages/*.json).

1. Groupe d'Informations de Compte Standard

Un groupe de profil utilisateur standard avec des champs de nom imbriqués obligatoires. Comprend une légende active et un texte d'état d'aide.

{
  "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. Groupe Invalide avec Message d'Erreur

Démontre comment le Fieldset affiche les messages d'erreur de validation lorsqu'une exigence de regroupement est violée. La saisie d'un errorText déclenche automatiquement des états invalides sur tous les champs enfants.

{
  "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. Bloc d'Options de Facturation Désactivé

Démontre une section de paramètres d'expédition entièrement désactivée. La désactivation du Fieldset parent verrouille automatiquement chaque élément imbriqué.

{
  "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
    }
  ]
}

Référence de Configuration CMS

Ces champs correspondent directement aux propriétés de bloc Sveltia CMS sous public/admin/config.yml ou aux configurations du Page Builder :

Notes de Développement et Accessibilité

• Sans Hydratation (Statique Uniquement) : Fieldset est un composant de mise en page sémantique désigné comme composant Statique Uniquement (Tier 3). Il est entièrement rendu en HTML standard côté serveur et est exempt de scripts d'hydratation côté client.
• Propagation de Contexte : Il utilise des fournisseurs de contexte pour propager les états disabled, invalid et required vers le bas. Les blocs de composants enfants directs (tels que Field et Textarea) écoutent automatiquement ce contexte et héritent des propriétés du groupe, éliminant les déclarations de clés en double.
• Conformité WAI-ARIA : Fieldset compile strictement vers des conteneurs HTML sémantiques <fieldset> contenant des éléments <legend> directs, satisfaisant aux exigences de titres accessibles du navigateur.