The FormRenderer component renders forms from a JSON schema and layout descriptor. It
handles input binding, validation, dirty tracking, conditional visibility, nested groups, and lookup
fields — all driven by configuration, not code.
Quick Start
Import FormRenderer from @rokkit/forms. Provide a JSON Schema (schema), a layout descriptor (layout), and bind data for two-way sync.
svelte
Highlighting code...
Props
- data (bindable): The form data object — mutated in place
- schema: JSON Schema describing field types and validation rules
- layout: Layout descriptor — elements, groups, display components
- validateOn: When to validate —
"blur","change","submit" - disabled: Disable all inputs
- readonly: Render all fields as read-only display
Events
- onchange(data, errors): Fires on any field change
- onsubmit(data): Fires when form is submitted and valid
- onerror(errors): Fires when validation fails on submit
Layout Element Types
- scope: JSON Pointer to a schema property (e.g.
#/address/city) - type: "group": Wraps children in a labelled section
- type: "horizontal": Side-by-side layout for multiple fields
- type: "display": Read-only display component (table, list, card)
See the Forms guide for conditional fields, lookup sources, and multi-step forms.