Introducción

Un contenedor de diseño estructural que agrupa controles de formulario relacionados bajo un <fieldset> nativo, completo con una leyenda accesible, texto de ayuda de soporte y mensajes de error de validación. Sirve como un ancla semántica esencial para formularios complejos de entrada de usuario, propagando automáticamente los estados deshabilitado, inválido y requerido a los controles de campo anidados.

El componente Fieldset está totalmente integrado como un bloque fieldset en el Page Builder, permitiendo a los autores de contenido y desarrolladores estructurar fácilmente secciones de perfil de múltiples entradas, formularios de dirección o módulos de facturación directamente dentro del CMS.

Uso a través del CMS Page Builder (JSON)

Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran grupos de fieldset dentro de los esquemas de página JSON (content/pages/*.json).

1. Grupo de Información de Cuenta Estándar

Un grupo de perfil de usuario estándar con campos de nombre anidados obligatorios. Incluye una leyenda activa y texto de estado de ayuda.

{
  "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. Grupo Inválido con Mensaje de Error

Muestra cómo el Fieldset muestra mensajes de error de validación cuando se viola un requisito de agrupación. Ingresar un errorText activa automáticamente estados inválidos en todos los campos secundarios.

{
  "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. Bloque de Opciones de Facturación Deshabilitado

Demuestra una sección de parámetros de envío completamente deshabilitada. Desactivar el Fieldset principal bloquea automáticamente cada elemento anidado.

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

Referencia de Configuración CMS

Estos campos se asignan directamente a las propiedades de bloque de Sveltia CMS bajo public/admin/config.yml o las configuraciones del Page Builder:

Notas para Desarrolladores y Accesibilidad

• Sin Hidratación (Solo Estático): Fieldset es un componente de diseño semántico designado como componente Solo Estático (Tier 3). Se renderiza completamente como HTML estándar del lado del servidor y está exento de scripts de hidratación del lado del cliente.
• Propagación de Contexto: Utiliza proveedores de contexto para propagar los estados disabled, invalid y required hacia abajo. Los bloques de componentes secundarios directos (como Field y Textarea) escuchan automáticamente este contexto y heredan las propiedades del grupo, eliminando declaraciones de claves duplicadas.
• Cumplimiento WAI-ARIA: Fieldset compila estrictamente a contenedores HTML semánticos <fieldset> que contienen elementos <legend> directos, satisfaciendo los requisitos de encabezado accesibles del navegador.