Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

React Define Form

React define form offers alternative typescript bindings for react-final-form. It requires you to "define" a form type, specifying the type of the form data.


yarn add react-define-form


import * as React from 'react';
import defineForm from 'react-define-form';

const { Form, Fields } = defineForm(f => ({
  name: f<string>(),
  bio: f<string>(),
  phone: f<string>()

const MyForm = () => (
    initialValues={{ name: '', bio: '', phone: '' }}
    onSubmit={values => {
    validate={values => {
      return {};
    render={({ handleSubmit, pristine, invalid }) => (
      <form onSubmit={handleSubmit}>
        <h2>Simple Default Input</h2>
          <label>First Name</label>
          < component="input" />

        <h2>Render Function</h2>
          render={({ input, meta }) => (
              <textarea {...input} />
              {meta.touched && meta.error && <span>{meta.error}</span>}

        <h2>Render Function as Children</h2>
          {({ input, meta }) => (
              <input type="text" {...input} placeholder="Phone" />
              {meta.touched && meta.error && <span>{meta.error}</span>}

        <button type="submit" disabled={pristine || invalid}>

export default MyForm;

For full API docs, you can look at react-final-form. The API for Form and Fields.SOME_FIELD_NAME in this module exactly match those of Form, Field and FormSpy in react-final-form, except that for Field, name is already set for you and this module does not support parse/format/allowNulls (null and undefined are not special cased and you should use the empty string directly instead).



You can’t perform that action at this time.