Create forms easily in React with Redux.
Branch: master
Clone or download
Latest commit e1b4d35 Jan 5, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update Nov 4, 2017
docs Fix urls on guide quickstart page Jun 19, 2018
examples Fixed double binding in examples user-form.js Feb 1, 2018
src Fix async validators capturing and overwriting validation results Jan 5, 2019
test Fixing lint errors Sep 15, 2018
.babelrc Revert "Revert "Merge remote-tracking branch 'davidkpiano/master'"" Oct 27, 2016
.bookignore Updating book files Sep 26, 2016
.editorconfig Added eslint and airbnb-config packages, eslintrc, eslintignore, and … Feb 25, 2016
.eslintignore Updating book files Sep 26, 2016
.eslintrc Revert "Using findNodeHandle for React Native. Addresses #882" Jul 24, 2017
.gitignore Added failing test Aug 16, 2017
.npmignore Ignoring .babelrc in .npmignore. Fixes #417 Sep 27, 2016
.travis.yml Updating travis.yml Jan 10, 2018
LICENSE Initial commit Dec 11, 2015 Update Jul 11, 2018 Updating Dec 9, 2016 Updating docs Dec 2, 2016
book.json Omitting react-dom for react native environments. Fixes #415 Sep 27, 2016
contributing.json add contributing.json file ( Apr 13, 2016
esdoc.json Simplifying change reducer (also fixes some edge-case bugs) Sep 5, 2016
immutable.d.ts Added tsdef for lib/immutable Jul 5, 2016
immutable.js Reverting immutable path change Jan 4, 2017
native.js Targeting ES5 version of native.js. Fixes #654 Feb 18, 2017
package-lock.json 1.16.12 Jan 5, 2019
package.json 1.16.12 Jan 5, 2019
react-redux-form.d.ts fix ChangeEvent Jul 6, 2018
wallaby.config.js ****TESTS***** moved test from ./lib to ./src. Source compiled regard… Feb 25, 2016
webpack.config.base.js Revert "Using findNodeHandle for React Native. Addresses #882" Jul 24, 2017 fix umd build Aug 2, 2016
yarn.lock stop submit and reset event from propagating by default May 9, 2018

React Redux Form

Join the chat at Build Status npm version CDNJS

⚠️ This project is in maintenance mode only. Please consider using Formik instead.

Read the Documentation

React Redux Form is a collection of reducer creators and action creators that make implementing even the most complex and custom forms with React and Redux simple and performant.

npm install react-redux-form@latest --save


# Dependencies (you probably already have these)
npm install react react-dom redux react-redux --save

# version 1.x.x
npm install react-redux-form@latest --save

Zero-Boilerplate <LocalForm>

If you want to get up and running with forms quickly without having to set up Redux, just use Local Forms:

import React from 'react';
import { LocalForm, Control } from 'react-redux-form';

export default class MyApp extends React.Component {
  handleChange(values) { ... }
  handleUpdate(form) { ... }
  handleSubmit(values) { ... }
  render() {
    return (
        onUpdate={(form) => this.handleUpdate(form)}
        onChange={(values) => this.handleChange(values)}
        onSubmit={(values) => this.handleSubmit(values)}
        <Control.text model=".username" />
        <Control.text model=".password" />

That's all you need. Seriously. Read the Documentation for more information.

NOTE: Please use <LocalForm> with react-redux version 4.x.x or 5.x.x.

Quick Start

For more fine-grained control (such as using custom reducers, storing form state globally, dispatching actions, etc.), you'll want to set up a Redux store for your forms.

Be sure to read the step-by-step quick start guide in the documentation.

import React from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { combineForms } from 'react-redux-form';

import MyForm from './components/my-form-component';

const initialUser = { name: '' };

const store = createStore(combineForms({
  user: initialUser,

class App extends React.Component {
  render() {
    return (
      <Provider store={ store }>
        <MyForm />
// ./components/my-form-component.js'
import React from 'react';
import { connect } from 'react-redux';
import { Control, Form } from 'react-redux-form';

class MyForm extends React.Component {
  handleSubmit(val) {
    // Do anything you want with the form value

  render() {
    return (
      <Form model="user" onSubmit={(val) => this.handleSubmit(val)}>
        <label>Your name?</label>
        <Control.text model=".name" />

// No need to connect()!
export default MyForm;

Posting Issues

When posting an issue, please include a detailed description along with a relevant code sample. Attaching a failing test case with your issue will go a long way and is much appreciated.

Feel free to fork this CodePen or this CodeSandbox for quickly creating reproducible examples!