Input

elements/input/Input.tsx

@@ -17,7 +17,11 @@ type TypesType = {
   password: string,
   reset: string,
   hidden: string,
-  number: string
+  number: string,
+  email: string,
+  url: string,
+  tel: string,
+  search: string
 }
 
 type InputSizesType = typeof InputSizes;
@@ -29,7 +33,9 @@ interface InputProps extends JSX.HTMLProps<HTMLInputElement|Input> {
   placeholder?: string,
   disabled?: boolean,
   inputSize?: keyof InputSizesType,
-  type?: keyof TypesType
+  type?: keyof TypesType,
+  required?: boolean,
+  maxLength?: number,
 }
 
 export class Input extends Component {
@@ -45,6 +51,8 @@ export class Input extends Component {
       disabled: prop.boolean(),
       type: prop.string(),
       inputSize: prop.string(),
+      required: prop.boolean(),
+      maxLength: prop.number(),
     }
   }
 
@@ -54,6 +62,8 @@ export class Input extends Component {
   placeholder: string;
   type = 'text';
   disabled: boolean;
+  required: boolean;
+  maxLength: number;
 
   inputElement: HTMLInputElement;
 
@@ -68,7 +78,7 @@ export class Input extends Component {
   }
 
   renderCallback() {
-    const { valid, value, placeholder, disabled, inputSize, type } = this;
+    const { valid, value, placeholder, disabled, inputSize, type, required, maxLength } = this;
     const className = css(
       'c-field',
       {
@@ -90,9 +100,11 @@ export class Input extends Component {
         className={className}
         type={type}
         value={value}
-        onChange={this.provideValue}
+        onInput={this.provideValue}
         placeholder={placeholder}
         disabled={disabled}
+        required={required}
+        maxLength={maxLength}
       />
     ]
   }