Introduction

Un contrôle de saisie fondamental conçu pour gérer les formulaires de manière propre et accessible. Il agrège les libellés de saisie, les textes d'aide contextuels, les états de validation d'erreur dynamiques et la vérification de règles basée sur du JS personnalisé dans une interface cohérente et conviviale pour les développeurs.

Le composant Field est entièrement intégré en tant que bloc interactif field dans le Page Builder. Cela permet aux créateurs de contenu et aux concepteurs de rédiger des champs, de placer des entrées de formulaire HTML personnalisées et de fournir une logique de validation côté client instantanée directement depuis Sveltia CMS sans écrire de code répétitif de mise en page.

Utilisation

Ces exemples illustrent comment les éditeurs de contenu lient et configurent les structures de champs de formulaire.

1. Champ de Saisie Standard

Un champ de texte standard comprenant un libellé accompagnateur, un espace réservé et un texte d'aide descriptif situé directement sous l'élément de saisie.

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

2. Saisie Dynamique avec Validation Côté Client

Utilise une logique de validation personnalisée. Lorsque l'utilisateur saisit moins de 5 caractères ou omet le symbole @, un message d'erreur s'affiche et est annoncé automatiquement de manière dynamique.

{
  "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. Champs d'Option Requis et Désactivés

Démontre les styles de champs de formulaire sous des états de bloc HTML standard. Cela aide les rédacteurs de contenu à visualiser l'apparence des champs lorsqu'ils sont obligatoires (indicateur d'astérisque) ou verrouillés en raison d'autorisations.

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

Props

Notes de Développement et Accessibilité

• Hydratation à Commutateur Intelligent : Par défaut, si le champ est une présentation statique standard sans déclencheurs de validation personnalisés ni liaisons dynamiques, il reste un balisage SSR statique léger. Fournir l'un des éléments validator, defaultValue ou "interactive": true promeut automatiquement l'élément en une îlot client entièrement hydratée.
• Connexions Descriptives WAI-ARIA : L'élément wrapper gère dynamiquement les connexions aria. L'élément de saisie enregistre automatiquement aria-describedby pointant vers les ID générés exacts à la fois du slot de texte d'aide et du slot de texte d'erreur.
• Prévention des Fuites d'Attributs : La primitive FieldRoot inclut des filtres intégrés pour empêcher les propriétés d'entrée standard (comme placeholder, autocomplete ou name) de fuiter sur le <div> wrapper externe, garantissant une sortie HTML complètement valide et propre.
• Contexte Compositionnel : Le composant Field prend en charge une architecture compositionnelle. Lors de l'imbrication de sous-éléments (comme des éléments Textarea personnalisés ou des éléments select personnalisés) en tant qu'enfants dans le Page Builder, ils consomment automatiquement le contexte partagé du Field externe pour résoudre les attributs de validation appropriés.