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,RadioGroup,TextArea,Checkbox}from'react-form';constExampleForm=()=>(<Formrender={({
submitForm
})=>(<formonSubmit={submitForm}><Textfield="firstName"placeholder='First Name'/><Textfield="lastName"placeholder='Last Name'/><RadioGroupfield="gender"><Radiovalue="male"/><Radiovalue="female"/></RadioGroup><TextAreafield="bio"/><Checkboxfield="agreesToTerms"/><buttontype="submit">Submit</button></form>)}/>)

Array and Data-driven fields

import{Form,Text}from"react-form";constExampleForm=()=>(<Formrender={({ submitForm, values, addValue, removeValue })=>(<formonSubmit={submitForm}><Textfield="firstName"placeholder="First Name"/><Textfield="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><Textfield={["friends",i,"firstName"]}placeholder="First Name"/><Textfield={["friends",i,"lastName"]}placeholder="Last Name"/>
// Use the form api to add or remove values to the friends array
<buttontype="button"onClick={()=>removeValue("friends",i)}>
Remove Friend
</button></div>))}
// Use the form api to add or remove values to the friends array
<buttontype="button"onClick={()=>addValue("friends",{})}>Add Friend</button></div><buttontype="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!constUserFields=()=>(<div><Textfield="firstName"placeholder="First Name"/><Textfield="lastName"placeholder="Last Name"/></div>)constExampleForm=()=>(<FormonSubmit={values=>console.log(values)}render={({ submitForm, values, addValue, removeValue })=>(<formonSubmit={submitForm}><UserFields/><NestedFieldfield="friends"render={()=>(// Create a new nested field context<div>
Friends
{values.friends&&values.friends.map((friend,i)=>(<divkey={i}><NestedFieldfield={i}render={()=>(<UserFields/>// Now the user fields will map to each friend!)}/><buttontype="button"onClick={()=>removeValue("friends",i)}>
Remove Friend
</button></div>))}<buttontype="button"onClick={()=>addValue("friends",{})}>
Add Friend
</button></div>)}/><buttontype="submit">Submit</button></form>)}/>)

Examples & Documentation

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

Older versions:

• Version 2.x.x
• Version 1.x.x