Forked. Formsy-React wrappers for Semantic-Ui-React's form Components

Usage no npm install needed!

<script type="module">
  import akihirotakamuraFormsySemanticUiReact from 'https://cdn.skypack.dev/@akihirotakamura/formsy-semantic-ui-react';


formsy-semantic-ui-react Build Status 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 (
      onValidSubmit={ props.onValidSubmit }
      loading={ props.isLoading }
        validationErrors={{ isEmail: 'Email not valid' }}
        errorLabel={ errorLabel }


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()

    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



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 Dcoumentaion


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