Lets you create formsy-react forms with Semantic-Ui-React components.
Installation
$ npm install formsy-semantic-ui-react --save
You will also need formsy-react
$ npm install formsy-react --save
Usage
The Components:
import { Input } from 'formsy-semantic-ui-react';
import { TextArea } from 'formsy-semantic-ui-react';
import { Checkbox } from 'formsy-semantic-ui-react';
import { Radio } from 'formsy-semantic-ui-react';
import { RadioGroup } from 'formsy-semantic-ui-react';
import { Dropdown } from 'formsy-semantic-ui-react';
import { Select } from 'formsy-semantic-ui-react';
You'll need to wrap them with Formsy.Form
import { Form } from 'formsy-react';
validation
For more information on validation, check out Formsy-React's Dcoumentaion
<Form
noValidate
onValidSubmit={ onSubmit }
onInvalidSubmit={ onInvalidSubmit }
>
<Input
name="email"
placeholder="Email"
icon="at"
iconPosition="left"
required
validations="isEmail"
validationErrors={{
isEmail: 'This is not a valid Email',
isDefaultRequiredValue: 'Email is required',
}}
/>
</Form>
Displaying Error Messages
To display error messages, pass an element through the errorLabel
prop.
Example: You can display Semaintic-UI-React's <Label/>
compnent:
<Checkbox
...
errorLabel={ <Label basic color="orange" pointing="left"/> }
/>
You can also pass in a custom component with the desired styles.
License: MIT