Getting started


You can add Formite to your package.json file with NPM or Yarn.

The package formite-core is required and you can install additional adapters like formite-html or formite-components.

npm install formite-core formite-html --save


yarn add formite-core formite-html

Formite is compatible with React v16.8+ and works with any UI framework or element.


Functional components

const SimpleForm = () => {
const { canSubmit, fields, Form, isDirty } = useForm({ firstName: "", lastName: "" }, handleSubmit);
return (
<input type="text" placeholder="First name" {...useInput(fields.firstName)} />
<input type="text" placeholder="Last name" {...useInput(fields.lastName)} />
<button type="submit" disabled={!(canSubmit && isDirty)}>Save</button>

Class components

To use Formite with class components you need the formite-core and the formite-components package.

npm install formite-core formite-components --save


yarn add formite-core formite-components

The Formite's components use children as a render prop:

<Form initialValues={{ firstName: "", lastName: "" }} onSubmitForm={handleSubmit} >
{(form, fields) => (
<InputField field={fields.firstName}>
{field => <input type="text" placeholder="First name" {...field} />}