Added HTML5 input types to TextField

.gitignore

@@ -4,3 +4,4 @@ npm-debug.log
 packages/*/coverage
 packages/*/lib
 packages/*/node_modules
+.idea

README.md

@@ -166,7 +166,7 @@ const ExplicitAutoForm = () =>
 | `RadioField`    | Radio checkbox.                                                 | `allowedValues`          |
 | `SelectField`   | Select.                                                         | `allowedValues`          |
 | `SubmitField`   | Submit button.                                                  | *none*                   |
-| `TextField`     | Text input.                                                     | `type: String`           |
+| `TextField`     | Text input. `type` can be overriden by valid HTML input types   | `type: String`           |
 
 **Note:** You can pass `component` prop to `AutoField` to bypass field guessing algorithm.
 
@@ -261,6 +261,14 @@ const PersonSchema = new SimpleSchema({
 | `type`         | `func`                | Field type.                            |
 | `value`        | `any`                 | Field value.                           |
 
+Default value of `text` is provided to text inputs but it can be overriden
+
+```js
+<TextField type="password" />    // html password field
+<TextField type="color" />       // html5 color picker
+<TextField type="tel" />         // html5 phone input
+```
+
 Every prop can be overriden, but `label`, `placeholder` and `disabled` have special semantics:
 
 ```js

packages/uniforms-bootstrap3/src/components/fields/TextField.js

@@ -12,7 +12,7 @@ const Text = props =>
             name={props.name}
             onChange={event => props.onChange(event.target.value)}
             placeholder={props.placeholder}
-            type="text"
+            type={props.type || 'text'}
             value={props.value}
         />
 

packages/uniforms-bootstrap4/src/components/fields/TextField.js

@@ -12,7 +12,7 @@ const Text = props =>
             name={props.name}
             onChange={event => props.onChange(event.target.value)}
             placeholder={props.placeholder}
-            type="text"
+            type={props.type || 'text'}
             value={props.value}
         />
     </FormGroup>

packages/uniforms-semantic/src/components/fields/TextField.js

@@ -3,6 +3,7 @@ import classnames     from 'classnames';
 import {connectField} from 'uniforms';
 
 const Text = ({
+    type="text",
     className,
     disabled,
     error,
@@ -13,8 +14,7 @@ const Text = ({
     required,
     value,
     ...props
-}) =>
-    <section className={classnames(className, {disabled, error, required}, 'field')} {...props}>
+}) => <section className={classnames(className, {disabled, error, required}, 'field')} {...props}>
         {label && (
             <label>
                 {label}
@@ -26,10 +26,9 @@ const Text = ({
             name={name}
             onChange={event => onChange(event.target.value)}
             placeholder={placeholder}
-            type="text"
+            type={type}
             value={value}
         />
-    </section>
-;
+      </section>
 
 export default connectField(Text);

packages/uniforms-unstyled/src/components/fields/TextField.js

@@ -2,15 +2,15 @@ import React          from 'react';
 import {connectField} from 'uniforms';
 
 const Text = ({
+    type="text",
     disabled,
     label,
     name,
     onChange,
     placeholder,
     value,
     ...props
-}) =>
-    <section {...props}>
+}) => <section {...props}>
         {label && (
             <label>
                 {label}
@@ -22,10 +22,10 @@ const Text = ({
             disabled={disabled}
             onChange={event => onChange(event.target.value)}
             placeholder={placeholder}
-            type="text"
+            type={type}
             value={value}
         />
-    </section>
+      </section>
 ;
 
 export default connectField(Text);