Optional validations and inputs

React Reform comes with some validations and wrapped inputs out of the box. They are not included in the main bundle. I.e. if you don't explicitely require them they won't be added to your build.

Also there's no magic in here. Have a look at the sources to learn what's going on here.

Inputs

You can require them via react-reform/opt/inputs. Take a look below at all the inputs in use:

import {Form, ReformContext} from 'react-reform'
import {Text, Textarea, Password, Select, Checkbox} from 'react-reform/opt/inputs'

...

<Form onSubmit={this.handleSubmit}>
  <Text name="name" isRequired/>
  <Textarea name="comment" hasMaxlength={140}/>
  <Password name="password" isRequired/>
  <Select name="fruit">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
  </Select>
  <Checkbox name="agreeToTos" isRequired/>
</Form>

Note: there's no default Radio input. This is because there's no unopionated way of handling those in react. It's recommended wrapping a package like react-radio-group.

Validations

React Reform also offers some typical validations. Here's a list of them

required

<Text name="..." isRequired/>

email

<Text name="..." isEmail/>

minlength

<Text name="..." hasMinlength={6}/>

maxlength

<Text name="..." hasMaxlength={140}/>

pattern

<Text name="..." hasPattern={/^\d+(\.\d+)?$/}/>