Sophisticated HTML form management for React
Branch: master
Clone or download
Latest commit 6d4d47c Jan 29, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Merge branch 'no-context' Jan 29, 2019
test bump: deps Jan 29, 2019
www docs: fix script Jan 29, 2019
.babelrc.js fix: update topeka, fix es build Jun 4, 2018
.eslintrc.yml finally add touched Sep 10, 2018
.gitattributes 🎉 Added .gitattributes & .gitignore files Jan 2, 2015
.gitignore burn it all to the ground and rebuild Sep 10, 2018
.travis.yml Babel 6 and dep updates (#63) Jun 21, 2016
License.txt upgrade buil Mar 31, 2015 done Jun 22, 2018
favicon.ico mo' docs May 8, 2015
package.json Publish v1.0.0 Jan 29, 2019
yarn.lock bump: deps Jan 29, 2019


npm version

Better form validation and value management for React. Provides minimal wiring while also allowing for complete input flexibility.

Built on yup and react-input-message.


npm i -S react-formal yup

(don't like the yup but like how the form works? Try: topeka)


For more complete api documentations, live examples, and getting started guide check out the documentation site.

react-formal uses a yup schema to update and validate form values. It treats the form like an input (representing an object) with a value and onChange. The form can be controlled or uncontrolled as well, just like a normal React input.

var yup = require('yup')
  , Form = require('react-formal')

var modelSchema = yup.object({
        name: yup.object({
            first: yup.string().required('Name is required'),
            last: yup.string().required('Name is required')
            .max(new Date(), 'You can be born in the future!')

// a component
render() {
    return (
            onChange={model => this.setState({ model })}
                <legend>Personal Details</legend>

                <Form.Field name='name.first'/>
                <Form.Message for='name.first'/>

                <Form.Field name='name.last'/>
                <Form.Message for='name.last'/>

                <Form.Field name='dateOfBirth'/>
                <Form.Message for='dateOfBirth'/>
            <Form.Submit type='submit'>Submit</Form.Submit>