v0.6.5

Add support for input group button addons. Thanks to @erzzo for contributing this.

v0.6.4

Add basic support for input group addons. Thanks @seburgi for contributing this.

v0.6.3

• Fix contexts for css classes to make them actually work.
• Clean-up shared component props.
• Allow setting arbitrary attributes on select <options>. Thanks to @rjatkinson2 for getting the ball rolling on this.

v0.6.2

• Allow <Select> components to have duplicate values.
  • Previously, the code raised React errors if we attempted to add multiple option elements with the same value to the select element. Fixed so that this is now possible. Thanks @dtrzepala for discovering this.
• Remove notice raised by using getDOMNode on refs in React 0.14.
• Remove unneeded browserify settings from package.json.
• Added a CHANGELOG pointing to the github releases page.
• Relaxed the allowable content for a label to allow any renderable content. Thanks @wkerswell.

v0.6.1

Patch to remove a stray dev-dependency on an older version of formsy-react.

v0.6.0

• Update for new formsy-react and React 0.14 releases.
• Includes support for displaying multiple error messages per component.

Thanks to everyone that has took the time to file issues and provide feedback.

v0.5.0

• Added the ability to add or remove some CSS class names. (thanks @erzzo, @wkerswell)
• Playground should now work with IE8 (thanks @wkerswell)

Thanks to everyone that has taken the time to file issues and provide feedback.

---

Modifying CSS class names

We can now add or remove CSS class names on the markup for the enclosing row, label, and element wrapper.

Class names are added or removed using the "deduped" version of JedWatson/classnames.

<Input
  name="cssTweaks"
  type="text"
  rowClassName="yellow"
  labelClassName={[{'col-sm-3': false}, 'col-sm-5']}
  elementWrapperClassName={[{'col-sm-9': false}, 'col-sm-7']}
/>

See the Layout tweaks in the playground for an example (code).

v0.4.1

• Allow <option> items in <select> menus to be disabled. (Thanks @rodryquintero)
• Add row class to to improve Bootstrap 4 alpha layout. (Thanks @m-r-r)
• Switch build to use babel instead of react-tools.

Thanks to everyone that has took the time to file issues and provide feedback.

v0.4.0

• Added a new <File /> component.
• onChange wasn't being called by some components. It is now. (Thanks @aphillipo)
• Fix labels so they are properly associated with their form elements. (Thanks @aphillipo)
• Tweaked npm package so people can find us on http://react-components.com/

Thanks to everyone that has took the time to file issues and provide feedback.

---

The <File /> component

The <File /> component wraps an <input type="file" />.

This component is very similar to the other <Input /> components, but instead of returning the input element's value (which contains a fake path for security reasons), it returns a HTML5 FileList as the component's value.

What you do with the returned FileList is completely up to you! See christianalfoni/formsy-react#126 for discussion on a formsy-react best practice for this.

As a guide, you might use FormData.append or FileReader.readAsDataURL and then upload using XMLHttpRequest.

v0.3.0

• Fix and update peer dependencies.
• Fixed issue that prevented the "playground" example working in Opera.
• New thing: enable setting the layout via a parent context.

Thanks to everyone that has took the time to file issues and provide feedback.

---

Set a layout using a parent context

A useful (but optional!) way of setting a form-level layout.

If you set a layout prop on a parent component, child formsy-react-components use a mixin method to inherit this 'master' layout attribute.

var React = require('react');
var Formsy = require('formsy-react');
var FRC = require('formsy-react-components');

var MyForm = React.createClass({
    mixins: [FRC.ParentContextMixin],
    render: function() {
        return (
            <Formsy.Form className={this.getLayoutClassName()}>
                <FRC.Input
                    name="input1"
                    label="Input"
                />
            </Formsy.Form>
        );
    }
});

React.render((
    <div>
        <MyForm layout="vertical" />
        <MyForm layout="elementOnly" />
    </div>
), document.getElementById('app'));