Worked on textarea component in the example folder..

.gitignore

@@ -1,2 +1,4 @@
 node_modules
 lib
+.idea/
+.DS_Store

examples/components/Input.js

@@ -32,7 +32,8 @@ const MyInput = React.createClass({
           type={this.props.type || 'text'}
           name={this.props.name}
           onChange={this.changeValue}
-          value={this.getValue()}
+          value={this.getValue() || ''}
+          placeholder={this.props.placeholder && this.props.type !== 'checkbox' ? this.props.placeholder : ''}
           checked={this.props.type === 'checkbox' && this.getValue() ? 'checked' : null}
         />
         <span className='validation-error'>{errorMessage}</span>

examples/components/Select.js

@@ -22,7 +22,7 @@ const MySelect = React.createClass({
     return (
       <div className={className}>
         <label htmlFor={this.props.name}>{this.props.title}</label>
-        <select name={this.props.name} onChange={this.changeValue} value={this.getValue()}>
+        <select name={this.props.name} onChange={this.changeValue} value={this.getValue() || ''}>
           {options}
         </select>
         <span className='validation-error'>{errorMessage}</span>

examples/components/Textarea.js

@@ -0,0 +1,47 @@
+/**
+ * Created by iamraphson on 9/24/16.
+ */
+import React from 'react';
+import Formsy from 'formsy-react';
+
+const MyTextarea = React.createClass({
+
+    // Add the Formsy Mixin
+    mixins: [Formsy.Mixin],
+
+    // setValue() will set the value of the component, which in
+    // turn will validate it and the rest of the form
+    changeValue(event) {
+        this.setValue(event.currentTarget.value);
+    },
+    render() {
+
+        // Set a specific className based on the validation
+        // state of this component. showRequired() is true
+        // when the value is empty and the required prop is
+        // passed to the input. showError() is true when the
+        // value typed is invalid
+        const className = 'form-group' + (this.props.className || ' ') +
+            (this.showRequired() ? ' required' : this.showError() ? ' error' : '');
+
+        // An error message is returned ONLY if the component is invalid
+        // or the server has returned an error message
+        const errorMessage = this.getErrorMessage();
+
+        return (
+            <div className={className}>
+                <label htmlFor={this.props.name}>{this.props.title}</label>
+                <textarea
+                name={this.props.name}
+                cols={this.props.cols || '20'}
+                rows={this.props.rows || '3'}
+                onChange={this.changeValue}
+                placeholder={this.props.placeholder || ''}
+                value={this.getValue() || ''} />
+                <span className='validation-error'>{errorMessage}</span>
+            </div>
+    );
+    }
+});
+
+export default MyTextarea;

examples/global.css

@@ -39,7 +39,8 @@ form {
 .form-group input[type='email'],
 .form-group input[type='number'],
 .form-group input[type='password'],
-.form-group select {
+.form-group select,
+.form-group textarea{
   display: block;
   width: 100%;
   height: 34px;
@@ -53,12 +54,16 @@ form {
   border-radius: 4px;
   box-sizing: border-box;
 }
+.form-group textarea {
+  height: auto;
+}
 
 .form-group.error input[type='text'],
 .form-group.error input[type='email'],
 .form-group.error input[type='number'],
 .form-group.error input[type='password'],
-.form-group.error select {
+.form-group.error select,
+.form-group.error textarea{
   border-color: red;
   color: red;
 }
@@ -67,7 +72,8 @@ form {
 .form-group.required input[type='email'],
 .form-group.required input[type='number'],
 .form-group.required input[type='password'],
-.form-group.required select {
+.form-group.required select,
+.form-group.required textarea{
   border-color: #FF9696;
 }
 

examples/reset-values/app.js

@@ -4,11 +4,13 @@ import { Form } from 'formsy-react';
 
 import MyInput from './../components/Input';
 import MySelect from './../components/Select';
+import MyTextarea from './../components/Textarea';
 
 const user = {
   name: 'Sam',
   free: true,
-  hair: 'brown'
+  hair: 'brown',
+  address: 'Class 7, Herbert Macaulay, Sabo Yaba, Lagos, Nigeria'
 };
 
 const App = React.createClass({
@@ -22,7 +24,8 @@ const App = React.createClass({
     return (
       <Formsy.Form ref="form" onSubmit={this.submit} className="form">
         <MyInput name="name" title="Name" value={user.name} />
-        <MyInput name="free" title="Free to hire" type="checkbox" value={user.free} />
+        <MyInput name="free" title="Free to hire" type="checkbox" value={user.free} placeholder="cool" />
+        <MyTextarea  title="Address" name="address" value={user.address} cols="20" rows="7" />
         <MySelect name="hair" title="Hair" value={user.hair}
           options={[
             { value: "black", title: "Black" },