FormBuilder / FormRenderer
Let the people using your app design their own forms: fields, show rules, required rules. The result is plain JSON, and FormRenderer shows it.
Demo
Try it: change Order type to Pick up, then look at Address.
Press Enter to select the field and open its settings. Press Space to pick it up, the arrow keys to move it and Space again to drop it. Escape puts it back. Delete removes it.To move a section, press Space, use the arrow keys, then press Space to drop it or Escape to cancel.
Order type
Conditional
Sample form. A hidden field is not checked and not sent. Design can be edited only on screens 1024px wide or more; below that the kit shows the preview only.
What the kit already does
- Show rules. ALL / ANY groups with one level of sub-group, enough for "(A and B) or C". The operators fit the field type.
- A sentence, not code. Every rule is read out as one sentence in the user's language.
- No loops. A field that would depend on itself is not offered, and a schema with a loop is refused.
- Old schemas keep working. Versions 1 and 2 are migrated automatically. validateFormSchema returns a Result and never throws.
- Many field types. Text, number, choice, date, file, phone, OTP code, tags, slider, fieldset and section.
// Halaman admin: desain form
export function DesignPage() {
return <FormBuilder schema={schema} onSchemaChange={saveSchema} />;
}
// Halaman pemakai: isi form
export function FillPage() {
const checked = validateFormSchema(stored);
if (!isOk(checked)) return <ErrorState error={checked.error} />;
return (
<FormRenderer
schema={checked.data}
onSubmit={(values) => sendAnswers(values)}
/>
);
}A server error from onSubmit shows on its field straight away.