diff --git a/.gitignore b/.gitignore
deleted file mode 100644
index eb3b083..0000000
--- a/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-.DS_Store
-build/.lock.pid
-build/.module-cache
\ No newline at end of file
diff --git a/build/forms.js b/build/forms.js
index d3efb31..c71c3cc 100644
--- a/build/forms.js
+++ b/build/forms.js
@@ -5,6 +5,7 @@ var formjs = React.createClass({displayName: 'formjs',
     var currentValues = this.state.values;
     currentValues[element.id] = {name: element.name, value: element.value};
     this.setState({values: currentValues});
+    console.log(this.state.values);
     return false;
   },
   handleSubmit: function() {
@@ -33,7 +34,21 @@ var formjs = React.createClass({displayName: 'formjs',
         {label:         element.label, 
         name:          element.name, 
         placeholder:   element.placeholder, 
-        value:         element.value, 
+        value:         element.value,
+        required:      element.required,
+        updateValues:  updateValues, 
+        id:            id} );
+      }
+      else if(element.type == "number" || element.type == "range"){
+        return generateNumberField( 
+        {label:         element.label, 
+        name:          element.name, 
+        type:          element.type, 
+        value:         element.value,
+        min:           element.min, 
+        max:           element.max, 
+        step:          element.step,
+        required:      element.required,
         updateValues:  updateValues, 
         id:            id} );
       }
@@ -50,13 +65,14 @@ var formjs = React.createClass({displayName: 'formjs',
         label:         element.label, 
         name:          element.name, 
         placeholder:   element.placeholder, 
-        value:         element.value, 
+        value:         element.value,
+        required:      element.required,
         updateValues:  updateValues,
         id:            id} );
       }
     });
     return(
-      React.DOM.form( {ref:"form", onSubmit:this.handleSubmit}, 
+      React.DOM.form( {onSubmit:this.handleSubmit}, 
         elements,
         React.DOM.input( {type:"submit", value:this.state.form.submitText} )
       )
@@ -79,7 +95,39 @@ var generateInputField = React.createClass({displayName: 'generateInputField',
     return(
       React.DOM.div( {className:"element textfield"}, 
       React.DOM.label(null, this.props.label),
-      React.DOM.input( {type:this.props.type, placeholder:this.props.placeholder, value:this.state.value, onChange:this.handleChange})
+      React.DOM.input( {type:  this.props.type,
+      placeholder:  this.props.placeholder,
+      value:        this.state.value,
+      required:     this.props.required,
+      onChange:     this.handleChange})
+      )
+    );
+  }
+});
+
+// number fields
+
+var generateNumberField = React.createClass({displayName: 'generateNumberField',
+  getInitialState: function() {
+    return {value: this.props.value};
+  },
+  handleChange: function(e) {
+    var name = this.props.name;
+    var value = e.target.value;
+    this.props.updateValues({id: this.props.id, name: name, value: value});
+    this.setState({value: value});
+  },
+  render: function(){
+    return(
+      React.DOM.div( {className:"element number"}, 
+      React.DOM.label(null, this.props.label),
+      React.DOM.input( 
+      {type:       this.props.type, min:"0",
+       max:       this.props.max,
+       step:      this.props.step,
+       value:     this.props.value,
+       required:  this.props.required,
+       onChange:  this.handleChange})
       )
     );
   }
@@ -100,7 +148,7 @@ var generateTextarea = React.createClass({displayName: 'generateTextarea',
     return(
       React.DOM.div( {className:"element textarea"}, 
       React.DOM.label(null, this.props.label),
-      React.DOM.textarea( {placeholder:this.props.placeholder, onChange:this.handleChange}, this.state.value)
+      React.DOM.textarea( {placeholder:this.props.placeholder, required:this.props.required, onChange:this.handleChange}, this.state.value)
       )
     );
   }
diff --git a/index.html b/index.html
index a9eed72..fa1445e 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,10 @@
     <script type="text/javascript">
       var fields = [
         {type: "text", name: "username", label: "new field", placeholder: "username", value: "test"},
-        {type: "password", name: "password", label: "password", placeholder: "password"},
+        {type: "radio", name: "password", label: "youre lame", placeholder: "password"},
+        {type: "number", name: "number", label: "choose one", min: 2,max: 25,step:3},
+        {type: "range", name: "number", label: "choose one", min: 4,max: 25,step:2},
+        {type: "search", name: "search", required: "required"},
         {type: "textarea", name: "status", label: "new status", placeholder: "what's up"},
         {type: "select", name: "select stuff", options: [{value: "hello", text: "this is the text"},{value: "hello2", text: "2nd text"}]}
       ];
diff --git a/src/forms.js b/src/forms.js
index 6c4ec04..e4dd80a 100644
--- a/src/forms.js
+++ b/src/forms.js
@@ -5,6 +5,7 @@ var formjs = React.createClass({
     var currentValues = this.state.values;
     currentValues[element.id] = {name: element.name, value: element.value};
     this.setState({values: currentValues});
+    console.log(this.state.values);
     return false;
   },
   handleSubmit: function() {
@@ -33,7 +34,21 @@ var formjs = React.createClass({
         label        = {element.label} 
         name         = {element.name} 
         placeholder  = {element.placeholder} 
-        value        = {element.value} 
+        value        = {element.value}
+        required     = {element.required}
+        updateValues = {updateValues} 
+        id           = {id} />;
+      }
+      else if(element.type == "number" || element.type == "range"){
+        return <generateNumberField 
+        label        = {element.label} 
+        name         = {element.name} 
+        type         = {element.type} 
+        value        = {element.value}
+        min          = {element.min} 
+        max          = {element.max} 
+        step         = {element.step}
+        required     = {element.required}
         updateValues = {updateValues} 
         id           = {id} />;
       }
@@ -50,13 +65,14 @@ var formjs = React.createClass({
         label        = {element.label} 
         name         = {element.name} 
         placeholder  = {element.placeholder} 
-        value        = {element.value} 
+        value        = {element.value}
+        required     = {element.required}
         updateValues = {updateValues}
         id           = {id} />;
       }
     });
     return(
-      <form ref="form" onSubmit={this.handleSubmit}>
+      <form onSubmit={this.handleSubmit}>
         {elements}
         <input type="submit" value={this.state.form.submitText} />
       </form>
@@ -79,7 +95,39 @@ var generateInputField = React.createClass({
     return(
       <div className="element textfield">
       <label>{this.props.label}</label>
-      <input type={this.props.type} placeholder={this.props.placeholder} value={this.state.value} onChange={this.handleChange}/>
+      <input type = {this.props.type}
+      placeholder = {this.props.placeholder}
+      value       = {this.state.value}
+      required    = {this.props.required}
+      onChange    = {this.handleChange}/>
+      </div>
+    );
+  }
+});
+
+// number fields
+
+var generateNumberField = React.createClass({
+  getInitialState: function() {
+    return {value: this.props.value};
+  },
+  handleChange: function(e) {
+    var name = this.props.name;
+    var value = e.target.value;
+    this.props.updateValues({id: this.props.id, name: name, value: value});
+    this.setState({value: value});
+  },
+  render: function(){
+    return(
+      <div className="element number">
+      <label>{this.props.label}</label>
+      <input 
+      type      = {this.props.type} min="0"
+       max      = {this.props.max}
+       step     = {this.props.step}
+       value    = {this.props.value}
+       required = {this.props.required}
+       onChange = {this.handleChange}/>
       </div>
     );
   }
@@ -100,7 +148,7 @@ var generateTextarea = React.createClass({
     return(
       <div className="element textarea">
       <label>{this.props.label}</label>
-      <textarea placeholder={this.props.placeholder} onChange={this.handleChange}>{this.state.value}</textarea>
+      <textarea placeholder={this.props.placeholder} required={this.props.required} onChange={this.handleChange}>{this.state.value}</textarea>
       </div>
     );
   }