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 onBlur validation on your form when certain fields lose focus.

---

Asynchronous Change Validation #

How to run asynchronous server-side onChange validation on your form when certain fields change.

---

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

---