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.


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