react-form

React-Form

Simple, powerful, highly composable forms in React

Go to live examples, code and docs!

Features

• 🚀 Lightweight and fast.
• 🔥 Built-in input primitives for building quickly.
• ⚖️ Scales from tiny to massively complex forms with ease.
• 🚚 Easily integrate with 3rd party components or build your own!
• ✍️ Nested Fields and ultra-composable syntax for complex form shapes.
• ⏲ Asynchronous validation
• 🎛 Simple API that supports manipulating values, errors, warnings, and successes
• 👉 Render Props!
• 😂 Works in IE (with a polyfill or two)

Questions? Ideas? Chat with us!

Sign up for the React-Tools Slack Org!

Installation

npm install --save react-form

Basic Usage

import { Form, Text, Radio, TextArea, Checkbox } from 'react-form';

const ExampleForm = () => (
  <Form render={({
    submitForm
  }) => (
    <form onSubmit={submitForm}>
      <Text field="firstName" placeholder='First Name' />
      <Text field="lastName" placeholder='Last Name' />
      <div>
        <label>
          Male <Radio field='gender' value="male" />
        </label>
        <label>
          Female <Radio field='gender' value="female" />
        </label>
      </div>
      <TextArea field="bio" />
      <Checkbox field="agreesToTerms" />
      <button type="submit">Submit</button>
    </form>
  )} />
)

Array and Data-driven fields

import { Form, Text } from 'react-form';

const ExampleForm = () => (
  <Form render={({
    submitForm,
    values,
    addValue,
    removeValue
  }) => (
    <form onSubmit={submitForm}>
      <Text field="firstName" placeholder='First Name' />
      <Text field="lastName" placeholder='Last Name' />
      <div>
        Friends
        {values.friends && values.friends.map((friend, i) => (
          // Loop over the friend values and create fields for each friend
          <div>
            <Text field={['friends', i, 'firstName']} placeholder='First Name' />
            <Text field={['friends', i, 'lastName']} placeholder='Last Name' />

            // Use the form api to add or remove values to the friends array
            <button onClick={() => removeValue('friends', i)>
              Remove Friend
            </div>
          </div>
        ))}
        // Use the form api to add or remove values to the friends array
        <button onClick={() => addValue('friends', {})>
          Add Friend
        </button>
      </div>
      <button type="submit">Submit</button>
    </form>
  )} />
)

Advanced Field reuse, and Nested Fields

import { Form, FormApi, NestedField, Text } from 'react-form';

// Reuse The user fields for the user and their friends!
const UserFields = () => (
  <div>
    <Text field="firstName" placeholder='First Name' />
    <Text field="lastName" placeholder='Last Name' />
  </div>
)

const ExampleForm = () => (
  <Form render={({
    submitForm,
    values,
    addValue,
    removeValue
  }) => (
    <form onSubmit={submitForm}>
      <UserFields />
      <NestedField field='friends' render={() => ( // Create a new nested field context
        <div>
          Friends
          {values.friends.map((friend, i) => (
            <div>
              <NestedField field={['friends', i]} render={() => (
                <UserFields /> // Now the user fields will map to each friend!
              )} />
              <button onClick={() => removeValue('friends', i)>
                Remove Friend
              </div>
            </div>
          ))}
          <button onClick={() => addValue('friends', {})>
            Add Friend
          </button>
        </div>
      )}/>
      <button type="submit">Submit</button>
    </form>
  )} />
)

Examples & Documentation

Visit react-form.js.org for examples and documentation for 2.x.x of React-Form.

Older versions:

• Version 1.x.x