0.3.10 • Public • Published

formsy-material-ui npm version

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.


$ 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.


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


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


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;


As of 0.3.8, components allow for onChange event handlers in props. They are fired when the value of the component changes, regardless of the underlying handler (eg, FomrsyToggle uses onToggle internally, but we still use onChange in props to hook into the event.) The call back signatures for all onChange handlers conform to Material-UI's proposed Standardized Callback Signatures.
An example usage of this would be to use an onChange for the FormsySelect and receive notifications when it changes.


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"
  enableButton: function () {
      canSubmit: true
  disableButton: function () {
      canSubmit: false
  submitForm: function (model) {
    // Submit your validated form
    console.log("Model: ", model);
  render: function () {
    let { wordsError } = this.errorMessages;
    return (
           hintText="What is your name?"
        floatingLabelText="How often?">
        <MenuItem value={'never'} primaryText="Never" />
        <MenuItem value={'nightly'} primaryText="Every Night" />
        <MenuItem value={'weeknights'} primaryText="Weeknights" />
          label="Do you agree to disagree?"
        <FormsyRadioGroup name="shipSpeed" defaultSelected="not_light">
            label="prepare for light speed"
            label="light speed too slow"
            label="go to ludicrous speed"

Material-ui provides a .focus() method for some its components, such as TextField. formsy-material-ui components wrap Material-UI components, and if the underlying Material-UI component has a .focus() method, then the formsy-material-ui components will also expose a .focus() method, which just delegates to the underlying Material-UI component's .focus().

In the example below, we implement part of a chat-messaging application. The component is a form that provides a text input and a submit button; users can enter their message in the input and send it with the submit button. As a UX feature, we clear the form (resetForm()) and put the user's cursor back in the text field (this.messageInput.focus()) so that the user can easily begin to type his or her next message. We set a React ref on the FormsyText component (setting it to this.messageInput) in order to have access to it and use .focus().

import React, { Component, PropTypes } from 'react'
import { Form } from 'formsy-react'
import RaisedButton from 'material-ui/lib/raised-button'
import FormsyText from 'formsy-material-ui/lib/FormsyText'
export default class ChatMessageForm extends Component {
  constructor (props) {
    this.submit = this.submit.bind(this)
    this.refMessageInput = c => this.messageInput = c
  submit (model, resetForm) {
  render () {
    return (
      <Form onValidSubmit={this.submit}>
         hintText="What's on your mind?"
ChatMessageForm.propTypes = {
  submitMessage: PropTypes.func.isRequired

Known Issues

See issues.

Release History



Originally based on an example by Ryan Blakeley.

Thanks to our contributors.

Package Sidebar


npm i formsy-material-ui-fork-ef

Weekly Downloads






Last publish


  • enrico.foschi