Forms

Rokkit Forms let you build complex forms from a JSON schema. Define fields, validation rules, and dependencies declaratively — the form builder handles rendering, validation, dirty tracking, and dynamic lookups.

Schema-Driven Forms

Define your form as a schema with typed properties. If you skip the schema, Rokkit auto-derives one from your data:

Auto-Derived Schema

Pass just data — Rokkit infers the schema and layout automatically:

Validation

Add validation rules directly in the schema. Built-in validators handle common patterns:

Control when validation triggers with the validateOn prop:

Add custom validation logic with the onvalidate callback:

Lookups

Populate select fields dynamically using lookups. Three patterns are supported:

Field Dependencies

When a lookup declares dependsOn, changing the dependency field automatically clears the dependent field's value and re-fetches its options. Fields with unmet dependencies are disabled until all required values are set.

FormBuilder

For programmatic control, use FormBuilder directly:

Custom Actions

Override the default Submit/Reset buttons with a custom actions snippet:

Custom Renderers

Replace any built-in control by passing a custom component via the renderers prop. Each entry maps a key to a Svelte component. Reference it in the layout element's props.renderer:

Any custom renderer receives bind:value, onchange, disabled, and all props defined in the layout element's props object. Built-in keys like toggle, switch, swatch are already registered — pass your own key to add new ones or override existing ones.

Related

• Field Mapping — How fields map data to component props
• State Management — Value binding and change events
• Select — Dropdown component used in form selects