Introduction

A foundational input control designed to manage forms cleanly and accessibly. It aggregates input labels, contextual helper texts, dynamic error validation states, and custom JS-based rule checking into a cohesive, developer-friendly interface.

The Field component is fully integrated as an interactive field block inside the Page Builder. This allows content creators and designers to draft fields, place custom HTML form inputs, and supply instant client-side validation logic directly from Sveltia CMS without writing layout boilerplate.

Usage

These examples illustrate how content editors bind and configure form field structures.

1. Standard Input Field

A standard text field featuring a companion label, placeholder prompt, and a description helper text located directly below the input element.

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

2. Dynamic Input with Client-Side Validation

Utilises custom validation logic. When the user inputs fewer than 5 characters or skips the @ sign, an error message is automatically displayed and announced dynamically.

{
  "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. Required & Disabled Option Fields

Demonstrates form field styles under standard HTML block states. This helps content writers visualise how fields look when they are mandatory (asterisk indicator) or locked due to permissions.

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

Props

| Validator Expression (validator) | string | - | Advanced JavaScript function expression evaluating the string input. Reconstructed client-side via new Function().
Example: `(value) => value.includes('@') \ | \ | 'Invalid email address'` |

| Force Interactive (interactive) | boolean | true | Ensures client-side hydration as an interactive island to support real-time user validation. |

Developer Notes & Accessibility

• Smart Switcher Hydration: By default, if the field is standard static presentation with no custom validation triggers or dynamic bindings, it remains lightweight static SSR markup. Providing any of validator, defaultValue, or "interactive": true automatically promotes the element to a fully hydrated client-side island.
• WAI-ARIA Descriptive Connections: The wrapper element dynamically manages aria connections. The input element automatically registers aria-describedby pointing to the exact generated IDs of both the helper text and error text slots.
• Attribute Leakage Prevention: The FieldRoot primitive includes built-in filters to prevent standard input properties (like placeholder, autocomplete, or name) from leaking onto the outer wrapper <div>, ensuring completely valid, clean HTML output.
• Compositional Context: The Field component supports a compositional architecture. When nesting sub-elements (like custom Textarea or custom select elements) as children in the Page Builder, they automatically consume the outer Field's shared context to resolve appropriate validation attributes.