- add label to textbox

Author: edwardxiao

docs/v4-doc.md

@@ -30,6 +30,7 @@
 |attributesWrapper                          |  Opt  |  Obj | Modify wrapper general attributes.<br/> **{<br/>id: 'myTextInputWrapperId'<br/>...<br/>}**                                   | {}      |
 |attributesInput                         |  Opt  |  Obj | Modify input general attributes. <br/> **{<br/>id: 'myTextInputId',<br/>maxLength: 524288,<br/>name: 'myTextInputName',<br/>type: 'password',<br/>autoComplete: 'On',<br/>placeholder: 'my placeholder text',<br/>...<br/>}**                                    | {}      |
 |value                             |  Opt  |  Str   |                                             |  ""        |
+|label                             |  Opt  |  Str   |                                             |  ""        | The content of label
 |disabled                          |  Opt  |  Bool  |                                             |  false     |
 |**validate**                      |**Opt**|**Bool**|**If you have a submit button and trying to validate all the inputs of your form at once, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.**|**false**   |
 |**validationCallback**           |**Opt**|**Func**|**Return the validation result.**|**none**    |
@@ -82,6 +83,7 @@ import 'react-inputs-validation/lib/react-inputs-validation.min.css';
     placeholder: 'Place your name here ^-^',
   }}
   value={name} //Optional.[String].Default: "".
+  label="" // Optional.[String].Default: "". The content of label
   disabled={false} //Optional.[Bool].Default: false.
   validate={validate} //Optional.[Bool].Default: false. If you have a submit button and trying to validate all the inputs of your form at once, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.
   validationCallback={res => this.setState({ hasNameError: res, validate: false })} //Optional.[Func].Default: none. Return the validation result.

example/index.js

@@ -848,6 +848,7 @@ class Index extends Component {
                         placeholder: 'Place your name here ^-^',
                       }}
                       value={name} // Optional.[String].Default: "".
+                      label="" // Optional.[String].Default: "". The content of label
                       disabled={false} // Optional.[Bool].Default: false.
                       validate={validate} // Optional.[Bool].Default: false. If you have a submit button and trying to validate all the inputs of your form at onece, toggle it to true, then it will validate the field and pass the result via the "validationCallback" you provide.
                       validationCallback={res => this.setState({ hasNameError: res, validate: false })} // Optional.[Func].Default: none. Return the validation result.

lib/components/index.js

@@ -1,6 +1,6 @@
 {
   "name": "react-inputs-validation",
-  "version": "4.4.5",
+  "version": "4.4.6",
   "description": "A react component for form inputs validation.",
   "main": "index.js",
   "repository": {

lib/react-inputs-validation.js

@@ -92,6 +92,7 @@ interface Props {
   attributesWrapper?: object;
   attributesInput?: AttributesInputObj;
   value?: string;
+  label?: string;
   disabled?: boolean;
   validate?: boolean;
   classNameInput?: string;
@@ -159,6 +160,7 @@ const component: React.FC<Props> = ({
   attributesWrapper = {},
   attributesInput = {},
   value = '',
+  label = '',
   disabled = false,
   validate = false,
   classNameInput = '',
@@ -463,6 +465,7 @@ const component: React.FC<Props> = ({
           ref={$input}
           {...attributesInput}
         />
+        {label && <label>{label}</label>}
       </div>
       {msgHtml}
     </div>