Examples #

Below are a list of examples that demonstrate the capabilities of redux-form for testing and learning purposes.

Each example is its own standalone web app with hot reloading. To prepare for running the examples locally, clone the redux-form repository and run npm install to install the necessary dependencies for redux-form. Then you can run the examples locally using either two methods:

  1. Run npm run example:EXAMPLE_FOLDER (Remember to replace EXAMPLE_FOLDER with the name of the folder for the example you want to run like npm run example:simple or npm run example:material-ui)

  2. Manually run the following commands:

    # Remember to replace EXAMPLE_FOLDER with the name of the example's folder
    cd ./examples/EXAMPLE_FOLDER
    npm install
    npm start

After following either of these methods, open localhost:3030 in your browser to view the example running locally on your machine.

Simple Form #

The simplest form. Demonstrates how to attach standard inputs to Redux.

Synchronous Validation #

How to add synchronous client-side validation to your form.

Field-Level Validation #

How to add field-level client-side validation to your form.

Submit Validation #

How to return server-side validation errors back from your submit function.

Asynchronous Blur Validation #

How to run asynchronous server-side validation on your form when certain fields lose focus.

Initializing From State #

How to initialize your form data from any slice of the Redux state.

Field Arrays #

How to create and manipulate arrays of fields.

Remote Submit #

How to use submit your form via a dispatched Redux action.

Normalizing #

How to use normalize your form values.

Immutable JS #

How to use Immutable JS for redux-form state storage.

Selecting Form Values #

How to bind certain form values as props to your entire form component.

Wizard Form #

How to create a multi-page "wizard" form.

Material-UI Examples #

Contains multiple Material-UI examples

React-Widgets Examples #

How to use react-widgets components with redux-form