# react-formal

**Repository Path**: mirrors_jquense/react-formal

## Basic Information

- **Project Name**: react-formal
- **Description**: Sophisticated HTML form management for React
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-08-09
- **Last Updated**: 2025-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-formal
[![npm version](https://img.shields.io/npm/v/react-formal.svg?style=flat-square)](https://www.npmjs.com/package/react-formal)

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

Built on [yup](https://github.com/jquense/yup) and [react-input-message](https://github.com/jquense/react-input-message).

## Install

```sh
npm i -S react-formal yup
```

__(don't like the yup but like how the form works? Try: [topeka](https://github.com/jquense/topeka))__

### Use

__For more complete api documentations, live examples, and getting started guide check out the [documentation site](http://jquense.github.io/react-formal).__

`react-formal` uses a [yup](https://github.com/jquense/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.

```js
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')
        }),
        dateOfBirth: yup.date()
            .max(new Date(), 'You can be born in the future!')
    })

// ...in a component
render() {
    return (
        <Form
            schema={modelSchema}
            value={this.state.model}
            onChange={model => this.setState({ model })}
        >
            <fieldset>
                <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'/>
            </fieldset>
            <Form.Submit type='submit'>Submit</Form.Submit>
        </Form>
    )
}
```