Introducción

Un control de entrada fundamental diseñado para gestionar formularios de manera limpia y accesible. Agrega etiquetas de entrada, textos de ayuda contextuales, estados de validación de errores dinámicos y verificación de reglas basadas en JS personalizadas en una interfaz cohesionada y amigable para desarrolladores.

El componente Field está totalmente integrado como un bloque interactivo field dentro del Page Builder. Esto permite a los creadores de contenido y diseñadores redactar campos, colocar entradas de formulario HTML personalizadas y proporcionar lógica de validación instantánea del lado del cliente directamente desde Sveltia CMS sin escribir código repetitivo de diseño.

Uso

Estos ejemplos ilustran cómo los editores de contenido enlazan y configuran estructuras de campos de formulario.

1. Campo de Entrada Estándar

Un campo de texto estándar con una etiqueta acompañante, un marcador de posición y un texto de ayuda descriptivo ubicado directamente debajo del elemento de entrada.

{
  "type": "field",
  "label": "Username",
  "placeholder": "e.g. jules_architect",
  "helperText": "Choose a unique public username.",
  "name": "username",
  "interactive": true
}

2. Entrada Dinámica con Validación del Lado del Cliente

Utiliza lógica de validación personalizada. Cuando el usuario introduce menos de 5 caracteres o omite el símbolo @, se muestra y anuncia automáticamente un mensaje de error de forma dinámica.

{
  "type": "field",
  "label": "Email Address",
  "placeholder": "architect@domain.com",
  "defaultValue": "invalid-email",
  "validator": "(value) => value.includes('@') || 'Must be a valid email containing \'@\''",
  "name": "email",
  "interactive": true
}

3. Campos de Opción Requeridos y Deshabilitados

Demuestra estilos de campos de formulario bajo estados de bloque HTML estándar. Esto ayuda a los redactores de contenido a visualizar cómo se ven los campos cuando son obligatorios (indicador de asterisco) o están bloqueados por permisos.

{
  "type": "field",
  "label": "Secret Key",
  "defaultValue": "SUPER_SECURE_TOKEN",
  "readOnly": true,
  "required": true,
  "interactive": true
}

Props

Notas para Desarrolladores y Accesibilidad

• Hidratación de Conmutador Inteligente: Por defecto, si el campo es una presentación estática estándar sin activadores de validación personalizados ni enlaces dinámicos, permanece como marcado SSR estático ligero. Proporcionar cualquiera de validator, defaultValue o "interactive": true promueve automáticamente el elemento a una isla de cliente totalmente hidratada.
• Conexiones Descriptivas WAI-ARIA: El elemento contenedor gestiona dinámicamente las conexiones aria. El elemento de entrada registra automáticamente aria-describedby apuntando a los ID generados exactos tanto del texto de ayuda como del de error.
• Prevención de Fuga de Atributos: La primitiva FieldRoot incluye filtros integrados para evitar que las propiedades de entrada estándar (como placeholder, autocomplete o name) se filtren al <div> contenedor externo, asegurando una salida HTML completamente válida y limpia.
• Contexto Composicional: El componente Field admite una arquitectura composicional. Al anidar subelementos (como elementos Textarea personalizados o elementos select personalizados) como hijos en el Page Builder, consumen automáticamente el contexto compartido del Field externo para resolver atributos de validación apropiados.