Einführung

Eine grundlegende Eingabesteuerung, die darauf ausgelegt ist, Formulare sauber und barrierefrei zu verwalten. Sie bündelt Eingabelabels, kontextbezogene Hilfstexte, dynamische Fehlervalidierungszustände und benutzerdefinierte JS-basierte Regelprüfungen in einer kohärenten, entwicklerfreundlichen Oberfläche.

Die Field-Komponente ist vollständig als interaktiver field-Block im Page Builder integriert. Dies ermöglicht es Content-Erstellern und Designern, Felder zu entwerfen, benutzerdefinierte HTML-Formulareingaben zu platzieren und sofortige clientseitige Validierungslogik direkt aus Sveltia CMS bereitzustellen, ohne Layout-Boilerplate schreiben zu müssen.

Verwendung

Diese Beispiele veranschaulichen, wie Content-Editoren Formularfeldstrukturen binden und konfigurieren.

1. Standard-Eingabefeld

Ein Standard-Textfeld mit begleitendem Label, Platzhalter-Aufforderung und einem beschreibenden Hilfetext direkt unter dem Eingabeelement.

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

2. Dynamische Eingabe mit Client-seitiger Validierung

Nutzt benutzerdefinierte Validierungslogik. Wenn der Benutzer weniger als 5 Zeichen eingibt oder das @-Zeichen überspringt, wird eine Fehlermeldung automatisch angezeigt und dynamisch angesagt.

{
  "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. Erforderliche & Deaktivierte Optionsfelder

Zeigt Formularfeld-Stile unter standardmäßigen HTML-Block-Zuständen. Dies hilft Content-Autoren zu visualisieren, wie Felder aussehen, wenn sie obligatorisch (Asterisk-Indikator) oder aufgrund von Berechtigungen gesperrt sind.

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

Props

Entwicklerhinweise & Barrierefreiheit

• Intelligente Switcher-Hydration: Standardmäßig bleibt das Feld leichtes statisches SSR-Markup, wenn es eine Standard-Statikpräsentation ohne benutzerdefinierte Validierungsauslöser oder dynamische Bindungen ist. Das Bereitstellen von validator, defaultValue oder "interactive": true befördert das Element automatisch zu einer vollständig hydrierten Client-Insel.
• WAI-ARIA Beschreibende Verbindungen: Das Wrapper-Element verwaltet aria-Verbindungen dynamisch. Das Eingabeelement registriert automatisch aria-describedby, das auf die exakt generierten IDs sowohl des Hilfetext- als auch des Fehlertext-Slots zeigt.
• Attribut-Leckage-Prävention: Das FieldRoot-Primitiv enthält eingebaute Filter, um zu verhindern, dass Standard-Eingabeeigenschaften (wie placeholder, autocomplete oder name) auf den äußeren Wrapper <div> durchsickern, was eine vollständig gültige, saubere HTML-Ausgabe sicherstellt.
• Kompositionaler Kontext: Die Field-Komponente unterstützt eine kompositionelle Architektur. Beim Verschachteln von Unterelementen (wie benutzerdefinierten Textarea- oder benutzerdefinierten Select-Elementen) als Kinder im Page Builder verbrauchen diese automatisch den gemeinsamen Kontext des äußeren Field, um entsprechende Validierungsattribute aufzulösen.