Take the hard parts out of form building!
A common structure for all your forms
Fab4m provides a simple API for defining your forms, so you can avoid repeating yourself with lots of tedious markup. Fab4m lets you define the form structure and the representation at the same time.
Add a component
Add a component from the list, and see the fab4m structure in action.
Code
This is the code for the form:
const form = createForm({
name: textField({
label: "Name",
description: "Enter your full name",
required: true,
}),
location: textField({
label: "Location",
}),
});
The result
The form structure get's rendered into your form!
<StatefulFormView
form={form}
hideSubmit={true}
/>
Built for complex forms
Fab4m makes it easy to build complex forms. We provide rules, validators and widgets to make form building a breeze.
Customize your form with widgets
Use different widgets to customize the form input. We provide the most common ones and you can create your own ones too!
Read more about widgetslocation: textField({
title: "Change the widget to preview it in the form:",
widget: selectWidget(["Gothenburg", "Stockholm"]) // <-- The widget changes here!
}),
Manage multiple values easily
Collect multiple values for any component.
Read more about multiple values
foods: textField({
title: "Favorite foods",
multiple: true, ,
minItems: 0,
maxItems: 0,
});
Validators
Add declarative validators to your form to make sure the data is valid.
Read more about validators
text: textField({
label: "Long text",
widget: textAreaWidget(),
description: `Enter a text that is at least 10 characters long`,
validators: [minLength(10)],
});
Visibility rules
Use visibility rules to decide which components to include in the form.
Read more about rulesnewsletter: booleanField({
label: "Sign up for our newsletter",
}),
email: emailField({
label: "Your email",
rules: [exists("newsletter")],
})
JSON Schema validation
A JSON Schema can be generated for all fab4m forms. This makes it easy to validate your data anywhere outside of the browser.
Read more about JSON SchemaThe following components:
email: emailField({
label: "Your email",
required: true,
}),
age: integerField({
label: "Age",
required: true,
validators: [min(18)],
})
Generates the following schema:
{
"title": "Form data",
"description": "A form submission",
"type": "object",
"properties": {
"email": {
"type": "string",
"title": "Your email",
"minLength": 1,
"format": "email"
},
"age": { "type": "integer", "title": "Age", "minimum": 18 }
},
"required": [ "email", "age" ]
}