Home

A simple and type safe form library for React made with Typescript.

Background

There are several open source form libraries for React which are all fine and do solve the most common problems, but when you move into more complicated scenarios they can be difficult to use. Often this is because they hide the state from you and some of them are also assuming your form fields are inside form elements, which isn't necessarily the case in complex situations like guides with multiple pages and sub forms.

simple-form is created based on the concept that you own the form state and simple-form provides some helpers which makes managing your form easy. This is actually the 4th generation of the library and the helpers have evolved so much that you very rarely need to access the state directly, but simple-form won't prevent you from doing so.

Philosophy

With simple-form you have to use some special form components. They are very easy to create and you can use or be inspired by the components @ilbrando/simple-form-joy made for MUI Joy UI or @ilbrando/simple-form-material-ui made for MUI Material UI.

The effort spend creating these form components is easily gained in the time saving in day to day development.

Developer experience (DX) and type safety is a very high priority and every part of simple-form you use when creating forms is 100% type safe.

Installation

Install the core library.

npm install --save @ilbrando/simple-form

If you want to use one of the simple-form component libraries also install

npm install --save @ilbrando/simple-form-joy

or

npm install --save @ilbrando/simple-form-material-ui

Build a form

Define your form fields.

type FormFields = {
  name: string;
  age: number;
};

Define your form and create it's state.

const fd = useFormDefinition<FormFields>({
  fields: {
    name: {},
    age: {}
  }
});

Get a form manager (helps you manage your form).

const fm = getFormManager(fd, false);

Render the form fields.

<>
  <FormText formManager={fm} fieldName="name" label="Name" />
  <FormNumber formManager={fm} fieldName="age" label="Age" />
</>

You can se more details on Create Basic Form