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:
| Rule | Applies To | Example |
|---|---|---|
required | All types | required: true |
min / max | Numbers | min: 18, max: 120 |
minLength / maxLength | Strings | minLength: 8 |
pattern | Strings | pattern: '^[A-Z]' |
format | Strings | format: 'email' |
enum | Strings | enum: ['a', 'b'] |
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:
Related
- Field Mapping — How fields map data to component props
- State Management — Value binding and change events
- Select — Dropdown component used in form selects