formsy-semantic-ui-react CI npm version
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:Nodedefault:none)Used to Show validation errors next to the inputs. Any
childrenget replaced bygetErrorMessage()
<Checkbox errorLabel={ <Label color="red" pointing="left"/> }/> />
-
instantValidation(type:booldefault:false)Whether or not to show validation errors as soon as user starts typing. Only available on
InputandForm.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