- label must provide attributesInput.id

Author: edwardxiao

docs/v4-doc.md

@@ -30,7 +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
+|label                             |  Opt  |  Str   |                                             |  ""        | The content of label. NOTE: must provide attributesInput.id
 |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**    |
@@ -83,7 +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
+  label="" // Optional.[String].Default: "". The content of label. NOTE: must provide attributesInput.id
   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,7 +848,7 @@ class Index extends Component {
                         placeholder: 'Place your name here ^-^',
                       }}
                       value={name} // Optional.[String].Default: "".
-                      label="" // Optional.[String].Default: "". The content of label
+                      label="" // Optional.[String].Default: "". The content of label. NOTE: must provide attributesInput.id
                       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.6",
+  "version": "4.5.0",
   "description": "A react component for form inputs validation.",
   "main": "index.js",
   "repository": {

lib/react-inputs-validation.js

@@ -86,6 +86,7 @@ const getDefaultAsyncObj = (obj: DefaultAsyncMsgObj) => {
   };
 };
 interface AttributesInputObj {
+  id?: string;
   maxLength?: number;
 }
 interface Props {
@@ -448,6 +449,7 @@ const component: React.FC<Props> = ({
   if (showMsg && !err && successMsg !== '') {
     msgHtml = <div className={successMsgClass}>{successMsg}</div>;
   }
+  console.log(attributesInput.id)
   return (
     <div className={wrapperClass} style={customStyleWrapper} {...attributesWrapper}>
       <div className={containerClass} style={customStyleContainer}>
@@ -465,7 +467,7 @@ const component: React.FC<Props> = ({
           ref={$input}
           {...attributesInput}
         />
-        {label && <label>{label}</label>}
+        {label && attributesInput.id && <label htmlFor={attributesInput.id}>{label}</label>}
       </div>
       {msgHtml}
     </div>