Quicky create formsy-react forms with Semantic-Ui-React's Form Components.

npm install (or yarn add) formsy-semantic-ui-react 

You will also need formsy-react

npm install (or yarn add) formsy-react 

// ES6 import { Form, Input, TextArea, Checkbox, Radio, RadioGroup, Dropdown, Select, } from 'formsy-semantic-ui-react';

// ES5 var Form = require('formsy-semantic-ui-react').Form; /** and so on for the rest of the Components **/

const App = (props) => { const errorLabel = <Label color="red" pointing/> return ( <Form onValidSubmit={ props.onValidSubmit } loading={ props.isLoading } > <Form.Input name="email" label="Email" validations="isEmail" validationErrors={{ isEmail: 'Email not valid' }} errorLabel={ errorLabel } /> </Form> ) }

This library defines a couple of (non-required) props for more control over behavior/markup:

• errorLabel (type: Node default: none)

  Used to Show validation errors next to the inputs. Any children get replaced by getErrorMessage()

 <Checkbox errorLabel={ <Label color="red" pointing="left"/> }/> />

• instantValidation (type: bool default: false)

  Whether or not to show validation errors as soon as user starts typing. Only available on Input and Form.Input

 <Input instantValidation />

Go to the example folder to see more examples of how the components are used. To run the example app:

npm/yarn install npm/yarn run example-app 

Then go to localhost:8080

For more information on building and validating formsy-react forms, take a look at Formsy-React's Documentation

Tests are done using Mocha, chai, sinon, and enzyme on jsdom. To run the tests,

npm/yarn install npm/yarn run test (or test:watch) 

License: MIT