React forms element

Flexible and customizable component to create forms easily.

Demo

There is a demo with some examples and a form creator here. The repo with the code is this one.

Quickstart

import React, { FunctionComponent, ReactElement } from 'react';
import './App.scss';
import { FormComponent, Field } from 'react-forms-element';

const validatePassword = (password: string): string => {
  return password.length < 6 ? 'short_pwd' : '';
}

const App: FunctionComponent = (): ReactElement => {
  const fields: Field[] = [
    { content: <div><h1>FORM EXAMPLE</h1></div>, type: 'custom' },
    { value: '', label: 'Name', name: 'name', type: 'string', required: true },
    { value: '', label: 'Password', name: 'pwd', type: 'password', required: true, customValidator: validatePassword, inputType: 'password' },
    { value: '', label: 'Business', name: 'business', type: 'checkbox', required: true }
  ];
  const errors = {
    short_pwd: 'Password too short'
  };

  const onSubmit = (form: any): any => console.log(form);

  return <div className="App">
      <FormComponent fields={fields} onSubmit={onSubmit} errors={errors} />
  </div>;
};

export default App;

Props and model

Default errors

| Name | Default | Description | | --- | --- | --- | | required_field | Required field | Error message to show when a field is not set and is required. | | wrong_email | Wrong email format | Error message to show when a field is of type email and the format is wrong. | | wrong_number | Wrong number format | Error message to show when a field is of type number and the value is not a number. | | wrong_min_n | Min value is n | Error message to show when a field is of type number and the value is lower than the min. | | wrong_max_n | Max value is n | Error message to show when a field is of type number and the value is higher than the max. | | no_selected | Select one option | Error message to show when a field is of type select and no option is selected. | | no_file_selected | Select a file | Error message to show when a field is of type file and no file is selected. |

FormComponent props

| Name | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | fields | Field[] | true | - | The array of fields to create the form and display. | | onSubmit | Function | true | - | The function to call when the form is submitted. It can return a JSON with errors where the key is the field name and the value the error code, if you want to show a non specific field error set the message in the generalError property of the JSON. | | className | string | false | - | The class to add to the form main div. | | errors | Record<string, string> | false | Default errors ↑ | A JSON containing the error messages, if one of above is specified it will be used, if not the default will be used. If one of your custom validations return a custom message it has to be added in this JSON (if it is not found the form will show the returned string). | | calendarLocale | any | false | date-fns/locale/en-US | The calendar config for the date input, use the date-fns/locale option you need (check th examples). | | submitButtonText | string | false | SEND | The submit button text. |

Field model

| Name | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | name | string | true | - | Name of the field, the returned JSON on submit will have the according value in this field. It MUST be unique. | | value | any | false | - | Value of the field when creating the form, more details in the next table. | | type | 'string' | 'textarea' | 'number' | 'select' | 'date' | 'checkbox' | 'file' | 'email' | 'checkbox-list' | 'list' | 'custom' | false | string | Type of the field that determines the type of input. | | className | string | false | - | Class to add to the field container. | | placeholder | string | false | - | Placeholder of the input. | | title | string | false | - | Title for the fields of type list. | | addButton | string | false | ADD | Text of the submit button for a list field. | | label | string | ReactElement | false | - | Label for the field. | | required | boolean | false | false | Whether the field is required or not. | | fileType | string | false | - | Accepted file types. | | multipleFiles | boolean | false | false | Whether to allow multiple file selection or not. | | multipleSelected | boolean | false | false | Wheter to allow multiple option selection or not. | | inputType | string | false | - | Type of the HTML input (for example, set tel if you want to display numbers keyboard in mobile devices). | | customValidator | Function | false | - | A function to validate the field, it will be executed on blur and on submit. If it returns a string or a Promise, the field error will contain this string, if not the default validation will be executed. | | content | ReactElement | false | - | The content to show for fields whose type is custom. | | options | {label: any, value: any}[] | false | - | The array of options to show for a select or a checkbox-list input. | | min | number | false | - | The min value of the input. | | max | number | false | - | The max value of the input. | | step | number | false | - | The step of the input for number fields. | | mobileCalendar | boolean | false | - | Whether to show a different mobile friendly calendar or not when the screen width is small. | | minDate | Date | false | - | Min date for date input. | | maxDate | Date | false | - | Max date for date input. | | onChange | Function | false | - | Function to call when the field value changes. | | onBlur | Function | false | - | Function to call when the field blur event is triggered. | | fields | Field[] | false | - | Fields to show for a list component, more details in the next table. | | showInList | boolean | false | - | Fields of type list show a table with the current value, only the values of the fields with showInList as true will be shown. | | listLabel | string | false | - | Fields of type list show a table with the current value, listLabel will be shown in the table header. If it is not defined label will be set as header for this field. | | formatDate | Function | false | - | Function to call when showing a date in the list table of values. | | dateFormat | string | false | dd/MM/yyyy | Date format for the date input. | | onSubmit | Function | false | - | Function called when the form of a list element is submitted. |

Field types

| Type | Accepted values | Description | | --- | --- | --- | | string | string | The string value. | | textarea | string | The string value. | | email | string | The email value. | | number | string | number | The number value, if it is not a valid number the validation will fail. | | email | string | The email value. | | select | any | The selected value of the select input when it is not multipleSelected. | | select | any[] | The array of the selected values of the select input when it is multipleSelected. | | date | Date | The date value. | | checkbox | boolean | The checkbox value. | | checkbox-list | string[] | The checkbox selected values. | | file | File | string | The File object or an url of the file. | | file | File[] | string[] | The array of file objects or urls. | | list | any[] | The array of custom objects. |

Custom styling

Provide a className attribute to the field you want to style or override the classes used by default:

| Class | Element | | --- | --- | | form-component | The main div that contains the form. | | field | Container of the input. | | input-error | Set to the input elements to paint the border when there is an error. | | title | Title of the a list field. | | submit-container | Container of the submit button. | | error | Error messages. | | select-component | Container of the select input. | | date-component | Container of the date input. | | file-component | Container of the file input. | | list-component | Container of the list input. | | checkbox-component | Container of the checkbox input. |

Support

Did you enjoy React Forms Element? Do you find it useful? Feel free to contribute and buy me a cup of coffee if you want to help!