The Flow form builder is built on the Flow design framework (website / github)
Quickly create and customize your form through the form builder schema. Built with developers in mind, the schema is simple and easy to use.
Out of the box TS support.
Validation is natively built and integrated throught the form-builder schema. You can easily reference built-in validations or quickly write your own custom or advanced validation.
Built with dyanmic complex usecases in mind, you can easily manupilate the form structure + data through built in events.
This form-builder automatically emits a state-change event whenever the internal state is modified, this gives you access to the validation state of the form builder silently (i.e. Without displaying validation messages).
This helps in custom or advanced scenarios like calling external APIs, modifying the form layout etc, based on user interactions
You can pass custom markup to render custom designs for titles, actions, help text, content, etc
Built on flow-core gives you accesss to all themes and components like emoji-picker, datetime-picker , suggestions ,file-upload,multi-select etc.
Structural correlation involves defining the data structure that will be transmitted between the frontend and backend, including the format and type of data. To achieve this, we leverage objects and arrays to support any type api payload format. This reduces the complex task of transpiling form builder output to the backend API payload format.
Head over to Flow form builder Storybook for a demo.
Flow form builder is built on Flow, an open source design framework. To run form builder, please make sure that you have Flow core as part of your project.
Note: If you already have Flow packages installed, please update to the latest versions
Note: If you do not have an existing front-end project, you can quickly create one from a flow starter kit.
npm i --save @nonfx/flow-form-builder
Note: after installation, re-start your application.
Paste the below snippet in your project and add your application startup/runtime code to it.
import "@nonfx/flow-core";
import "@nonfx/flow-form-builder";Note: After adding, re-start your application. Make sure you are using version >4.5
For Vue 3:
Copy paste below import types in your main.ts file.
import "@nonfx/flow-form-builder/dist/types/vue3";For Vue 2
Copy paste below import types in your main.ts file.
import "@nonfx/flow-form-builder/dist/types/vue2";For React
React: Include react type in tsconfig.json file like below.
"include": ["src", "./node_modules/@nonfx/flow-form-builder/dist/types/react.ts"]We have created a sample form along with it's schema to get you going, simply copy paste the below language code block in your VueJS project.
<template>
<f-div padding="large" height="100%" overflow="scroll">
<f-form-builder
ref="form"
:field.prop="field"
:values.prop="values"
@submit="handleSubmit"
@state-change="handleStateChange"
@input="handleInput"
>
<f-div width="200px">
<f-button :disabled="state?.isValid ? false : true" label="Submit" type="submit"></f-button>
</f-div>
</f-form-builder>
</f-div>
</template><script lang="ts">
import {
FormBuilderField,
FormBuilderState,
FormBuilderValues,
} from "@nonfx/flow-form-builder";
import { defineComponent } from "vue";
export default defineComponent({
name: "FlowFormBuilder",
data(): {
field: FormBuilderField;
state: FormBuilderState | null;
values: FormBuilderValues | undefined;
} {
return {
field: {
type: "object",
direction: "vertical",
fieldSeparator: true,
fields: {
selectBox: {
label: {
title: "Multi-select Box",
},
selection: "multiple",
options: ["option 1", "option 2", "option 3"],
type: "select",
placeholder: "This is a placeholder",
iconLeft: "i-app",
disabled: false,
clear: true,
validationRules: [
{
name: "required",
},
],
},
textField: {
label: {
title: "Text Field",
},
type: "text",
helperText: "This field is a required field",
validationRules: [
{
name: "required",
},
],
},
switchButton: {
type: "switchButton",
validationRules: [
{
name: "required",
},
],
},
radio: {
type: "radio",
label: {
title: "Radios",
},
// helperText: "This field is required",
options: [
{ id: "1", title: "Orange", iconTooltip: "hello" },
{
id: "2",
title: "Banana",
iconTooltip: "hello",
},
],
validationRules: [
{
name: "required",
},
],
},
checkboxField: {
type: "checkbox",
direction: "horizontal",
label: {
title: "Check/Uncheck options",
description: "this my checkbox",
},
// helperText: "This field is required",
options: [
{ id: "1", title: "Orange", iconTooltip: "hello" },
{
id: "2",
title: "Banana",
iconTooltip: "hello",
},
],
validationRules: [
{
name: "required",
},
],
},
textAreaField: {
type: "textarea",
label: {
title: "Textarea Field",
},
placeholder: "This is a placeholder",
maxLength: 100,
disabled: false,
readonly: false,
clear: true,
validationRules: [
{
name: "required",
},
],
},
nestedObject: {
type: "object",
label: {
title: "Nested Object",
},
fields: {
username: {
label: {
title: "Username",
},
type: "text",
validationRules: [{ name: "required" }],
},
emoji: {
label: {
title: "Emoji",
},
type: "emoji",
validationRules: [{ name: "required" }],
},
},
},
nestedArray: {
type: "array",
label: {
title: "Nested array",
description: "Click on + button to add more",
},
field: {
type: "text",
validationRules: [
{
name: "required",
},
],
},
},
},
},
values: { textField: "vikas" },
state: null,
};
},
methods: {
handleSubmit(event: CustomEvent) {
console.log("Submit", event);
},
handleStateChange(event: CustomEvent) {
this.state = event.detail as FormBuilderState;
console.log(this.state);
},
handleInput(event: CustomEvent) {
// console.log(event.detail);
this.values = event.detail as FormBuilderValues;
},
},
});
</script>Once it's running, you will see a rendered form like the image below.
Head over to Flow form builder Storybook for all properties and playground.