formsy-material-ui

formsy-react is a form validation component for React forms. This is a wrapper for Material-UI form components to allow them to be used with formsy-react.

Installation

$ npm install formsy-material-ui

Note: For React 0.13.x compatibility, specify formsy-react 0.14.1 in your app.

NB: Material-UI 0.14.1 introduced a regression that made it incompatible with CommonJS require(). Please use Material-UI 0.14.2 or above.

Usage

Note: for FormsyText you must use value instead of defaultValue to set a default value.

As of 0.3.0 the library is split into separate modules, so you can import only those needed for a particular form. This will save overhead particularly if you are not using the Date and / or Time components.

var FormsyCheckbox = require('formsy-material-ui/lib/FormsyCheckbox');
var FormsyDate = require('formsy-material-ui/lib/FormsyDate');
var FormsyRadio = require('formsy-material-ui/lib/FormsyRadio');
var FormsyRadioGroup = require('formsy-material-ui/lib/FormsyRadioGroup');
var FormsySelect = require('formsy-material-ui/lib/FormsySelect');
var FormsyText = require('formsy-material-ui/lib/FormsyText');
var FormsyTime = require('formsy-material-ui/lib/FormsyTime');
var FormsyToggle = require('formsy-material-ui/lib/FormsyToggle');

If you prefer you can import the whole library, and associated MUI components, by requiring formsy-material-ui this will have the same footprint, regardless of which components you chose to assign in the following line(s):

ES6:

const FMUI = require('formsy-material-ui');
const { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;

ES5:

var FMUI = require('formsy-material-ui');
var FormsyCheckbox = FMUI.FormsyCheckbox;
var FormsyDate = FMUI.FormsyDate;
var FormsyRadio = FMUI.FormsyRadio;
var FormsyRadioGroup = FMUI.FormsyRadioGroup;
var FormsySelect = FMUI.FormsySelect;
var FormsyText = FMUI.FormsyText;
var FormsyTime = FMUI.FormsyTime;
var FormsyToggle = FMUI.FormsyToggle;

Examples

Example App

Live demo, code: formsy-material-ui

Example Code

const FMUI = require('formsy-material-ui');
const { FormsyCheckbox, FormsyDate, FormsyRadio, FormsyRadioGroup, FormsySelect, FormsyText, FormsyTime, FormsyToggle } = FMUI;
const RaisedButton = require('material-ui/lib/raised-button');

const Form = React.createClass({

  getInitialState: function () {
    return {
      canSubmit: false
    };
  },

  errorMessages: {
    wordsError: "Please only use letters"
  },

  selectFieldItems: [
    { payload: 'never', text: 'Never' },
    { payload: 'nightly', text: 'Every Night' },
    { payload: 'weeknights', text: 'Weeknights' }
  ],

  enableButton: function () {
    this.setState({
      canSubmit: true
    });
  },

  disableButton: function () {
    this.setState({
      canSubmit: false
    });
  },

  submitForm: function (model) {
    // Submit your validated form
    console.log("Model: ", model);
  },

  render: function () {
    let { wordsError } = this.errorMessages;

    return (
      <Formsy.Form
        onValid={this.enableButton}
        onInvalid={this.disableButton}
        onValidSubmit={this.submitForm} >

         <FormsyText
          name='name'
          validations='isWords'
          validationError={wordsError}
          required
          hintText="What is your name?"
          value="Bob"
          floatingLabelText="Name" />

        <FormsySelect
          name='frequency'
          required
          floatingLabelText="How often do you?"
          menuItems={this.selectFieldItems}/>

        <FormsyDate
          name='date'
          required
          floatingLabelText="Date" />

        <FormsyTime
          name='time'
          required
          floatingLabelText="Time" />

        <FormsyCheckbox
          name='agree'
          label="Do you agree to disagree?"
          defaultChecked={true} />

        <FormsyToggle
          name='toggle'
          label="Toggle" />

        <FormsyRadioGroup name="shipSpeed" defaultSelected="not_light">
          <FormsyRadio
            value="light"
            label="prepare for light speed" />
          <FormsyRadio
            value="not_light"
            label="light speed too slow" />
          <FormsyRadio
            value="ludicrous"
            label="go to ludicrous speed"
            disabled={true} />
        </FormsyRadioGroup>

        <RaisedButton
          type="submit"
          label="Submit"
          disabled={!this.state.canSubmit} />
      </Formsy.Form>
    );
  }
});

Known Issues

See issues.

Release History

See CHANGELOG.md

Acknowledgements

Originally based on an example by Ryan Blakeley.

Thanks to our contributors.