{"componentChunkName":"component---src-templates-docs-js","path":"/docs/contrast/react/forms","result":{"data":{"site":{"siteMetadata":{"title":"Resources to help developers | Contrast | Devwares","docsLocation":""}},"mdx":{"fields":{"id":"17197e91-ec77-5e4c-a166-33d2e82aaa76","title":"Forms","slug":"/contrast/react/forms"},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Forms\",\n  \"metaTitle\": \"Contrast Bootstrap React Forms\",\n  \"metaDescription\": \"These are Contrast Bootstrap React Components \"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h1\", null, \"Forms\"), mdx(\"p\", null, \"React Bootstrap forms are input-based components which are designed to collect users data. Used as login, subscribe or contact form, all can be easily customized.\"), mdx(\"p\", null, \"While creating CDB, we were aware of their importance in almost every project, so we have put a lot of effort to get them right.\"), mdx(\"p\", null, \"Such constructions like predefined Form logins, Form registers, Form subscriptions or Form contacts and other layout forms varying in their design are all at your disposal. Each of them offers a different type of functionality.\"), mdx(\"h2\", null, \"Default Form Login\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-4\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \" Sign in \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"div\", {\n    className: \"d-flex flex-wrap justify-content-center align-items-center\"\n  }, mdx(\"input\", {\n    type: \"checkbox\",\n    className: \"mr-1\"\n  }), mdx(\"p\", {\n    className: \"m-0\"\n  }, \"Remember me\"), mdx(\"span\", {\n    className: \"text-primary ml-3\",\n    href: \"#\"\n  }, \"Forgot Password ?\")), mdx(\"button\", {\n    className: \"btn btn-dark btn-block my-3\"\n  }, \"Sign in\"), mdx(\"p\", {\n    className: \"text-center\"\n  }, \"Not a member? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Register\")), mdx(\"p\", {\n    className: \"text-center\"\n  }, \" or sign in with\"), mdx(\"div\", {\n    className: \"my-3 d-flex justify-content-center\"\n  }, mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-google-plus-g\"\n  })))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4\\\"> Sign in </p>\\n                </div>\\n                <CDBInput material hint=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <CDBInput material hint=\\\"Password\\\" type=\\\"password\\\" />\\n                <div className=\\\"d-flex flex-wrap justify-content-center align-items-center\\\">\\n                  <CDBInput type=\\\"Checkbox\\\" />\\n                  <p className=\\\"m-0\\\">Remember me</p>\\n                  <CDBLink to=\\\"#\\\">Forgot Password ?</CDBLink>\\n                </div>\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Sign in\\n                </CDBBtn>\\n                <p className=\\\"text-center\\\">Not a member? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Register</CDBLink></p>\\n                <p className=\\\"text-center\\\"> or sign in with</p>\\n                <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    style={{boxShadow:\\\"none\\\"}}\\n                  >\\n                    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    style={{boxShadow:\\\"none\\\"}}\\n                  >\\n                    <CDBIcon fab icon=\\\"twitter\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    style={{boxShadow:\\\"none\\\"}}\\n                  >\\n                    <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n                  </CDBBtn>\\n                </div>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Contrast Form Login\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      \"background\": \"black\"\n    },\n    className: \"text-center text-white\"\n  }, mdx(\"p\", {\n    className: \"h5 mt-2 py-4 font-weight-bold\"\n  }, \"Sign in\")), mdx(\"div\", {\n    className: \"mx-4 mt-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"div\", {\n    className: \"mt-5 d-flex flex-wrap justify-content-center align-items-center\"\n  }, mdx(\"input\", {\n    type: \"checkbox\",\n    className: \"mr-2\"\n  }), mdx(\"p\", {\n    className: \"m-0\"\n  }, \"Remember me\"), mdx(\"span\", {\n    href: \"#\",\n    className: \"text-primary ml-3\"\n  }, \"Forgot Password ?\")), mdx(\"button\", {\n    className: \"btn btn-block btn-outline-dark my-3\"\n  }, \"Sign in\"), mdx(\"p\", {\n    className: \"text-center\"\n  }, \"Not a member? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Register\")), mdx(\"p\", {\n    className: \"text-center\"\n  }, \" or sign in with\"), mdx(\"div\", {\n    className: \"my-3 d-flex justify-content-center\"\n  }, mdx(\"button\", {\n    className: \"btn m-0\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    className: \"btn m-0\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    className: \"btn m-0\"\n  }, mdx(\"i\", {\n    className: \"fab fa-linkedin-in\"\n  })), mdx(\"button\", {\n    className: \"btn m-0\"\n  }, mdx(\"i\", {\n    className: \"fab fa-github\"\n  })))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCheckbox, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <div style={{ background:\\\"black\\\" }} className=\\\"text-center text-white\\\">\\n                <p className=\\\"h5 mt-2 py-4 font-weight-bold\\\">Sign in</p>\\n              </div>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <CDBInput label=\\\"Email\\\" type=\\\"email\\\"/>\\n                <CDBInput label=\\\"Password\\\" type=\\\"password\\\"/>\\n                <div className=\\\"mt-5 d-flex flex-wrap justify-content-center align-items-center\\\">\\n                  <CDBCheckbox className=\\\"mr-2\\\"/>\\n                  <p className=\\\"m-0\\\">Remember me</p>\\n                  <CDBLink to=\\\"#\\\">Forgot Password ?</CDBLink>\\n                </div>\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  outline\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Sign in\\n                </CDBBtn>\\n                <p className=\\\"text-center\\\">Not a member? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Register</CDBLink></p>\\n                <p className=\\\"text-center\\\"> or sign in with</p>\\n                <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"twitter\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"linkedin-in\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"github\\\"/>\\n                  </CDBBtn>\\n                </div>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Default Form Register\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-2\"\n  }, mdx(\"p\", {\n    className: \"h4 mb-5\"\n  }, \" Sign up \")), mdx(\"div\", {\n    className: \"row mb-n4\"\n  }, mdx(\"div\", {\n    className: \"col\"\n  }, mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"First Name\"))), mdx(\"div\", {\n    className: \"col\"\n  }, mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"Last Name\"))), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"p\", {\n    className: \"text-muted text-center small\"\n  }, \"At least 8 characters and 1 digit\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"Phone number\")), mdx(\"p\", {\n    className: \"text-muted text-center small\"\n  }, \"Optional - for two step authentication\")), mdx(\"div\", {\n    className: \"d-flex justify-content-center align-items-center mt-4\"\n  }, mdx(\"input\", {\n    className: \"mr-2\",\n    type: \"checkbox\"\n  }), mdx(\"p\", {\n    className: \"m-0\"\n  }, \"Subscribe to our newsletter\")), mdx(\"button\", {\n    className: \"btn btn-block my-3 btn-dark\"\n  }, \"Sign up\"), mdx(\"p\", {\n    className: \"text-center\"\n  }, \" or sign up with\"), mdx(\"div\", {\n    className: \"mb-3 d-flex justify-content-center\"\n  }, mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-google-plus-g\"\n  }))), mdx(\"p\", {\n    className: \"text-center m-0\"\n  }, \"Already have an account? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Sign In\")), mdx(\"hr\", null), mdx(\"p\", {\n    className: \"text-center\"\n  }, \"By clicking \", mdx(\"em\", null, \"Sign up\"), \" you agree to our \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"terms of service\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4\\\"> Sign up </p>\\n                </div>\\n                <div className=\\\"form-row mb-n4\\\">\\n                  <div className=\\\"col\\\"><CDBInput material hint=\\\"First name\\\" type=\\\"text\\\" /></div>\\n                  <div className=\\\"col\\\"><CDBInput material hint=\\\"Last name\\\" type=\\\"text\\\" /></div>\\n                </div>\\n                <CDBInput material hint=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <p className=\\\"text-muted text-center small mt-n4\\\">At least 8 characters and 1 digit</p>\\n                <CDBInput material hint=\\\"Password\\\" type=\\\"password\\\" />\\n                <CDBInput material hint=\\\"Phone number\\\" type=\\\"text\\\" />\\n                <p className=\\\"text-muted text-center small mt-n4\\\">Optional - for two step authentication</p>\\n                <div className=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n                  <CDBInput type=\\\"Forms\\\" />\\n                  <p className=\\\"m-0\\\">Subscribe to our newsletter</p>\\n                </div>\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Sign up\\n                </CDBBtn>\\n                <p className=\\\"text-center\\\"> or sign up with</p>\\n                <div className=\\\"row mb-3 d-flex justify-content-center\\\">\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    style={{boxShadow:\\\"none\\\"}}\\n                  >\\n                    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    style={{boxShadow:\\\"none\\\"}}\\n                  >\\n                    <CDBIcon fab icon=\\\"twitter\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    style={{boxShadow:\\\"none\\\"}}\\n                  >\\n                    <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n                  </CDBBtn>\\n                </div>\\n                  <p className=\\\"text-center m-0\\\">Already have an account? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Sign In</CDBLink></p>\\n                <hr/>\\n                <p className=\\\"text-center\\\">By clicking <em>Sign up</em> you agree to our <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">terms of service</CDBLink></p>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Contrast Form Register\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"text-center text-white\",\n    style: {\n      \"background\": \"black\"\n    }\n  }, mdx(\"p\", {\n    className: \"h5 mt-2 py-4 font-weight-bold\"\n  }, \" Sign up \")), mdx(\"div\", {\n    className: \"mx-4 mt-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"row mb-n4\"\n  }, mdx(\"div\", {\n    className: \"col\"\n  }, mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"First Name\"))), mdx(\"div\", {\n    className: \"col\"\n  }, mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Last Name\"))), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"p\", {\n    className: \"text-muted text-center small mt-n3\"\n  }, \"At least 8 characters and 1 digit\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Phone number\")), mdx(\"p\", {\n    className: \"text-muted text-center small mt-n3\"\n  }, \"Optional - for two step authentication\")), mdx(\"div\", {\n    className: \"d-flex justify-content-center align-items-center mt-4\"\n  }, mdx(\"input\", {\n    className: \"mr-2\",\n    type: \"checkbox\"\n  }), mdx(\"p\", {\n    className: \"m-0\"\n  }, \"Subscribe to our newsletter\")), mdx(\"button\", {\n    className: \"btn btn-block my-3 btn-outline-dark\"\n  }, \"Sign up\"), mdx(\"p\", {\n    className: \"text-center\"\n  }, \" or sign up with\"), mdx(\"div\", {\n    className: \"mb-3 d-flex justify-content-center\"\n  }, mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-linkedin-in\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-github\"\n  }))), mdx(\"p\", {\n    className: \"text-center m-0\"\n  }, \"Already have an account? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Sign In\")), mdx(\"hr\", null), mdx(\"p\", {\n    className: \"text-center\"\n  }, \"By clicking \", mdx(\"em\", null, \"Sign up\"), \" you agree to our \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"terms of service\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCheckbox, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <div className=\\\"text-center text-white\\\" style={{background:\\\"black\\\"}}>\\n                <p className=\\\"h5 mt-2 py-4 font-weight-bold\\\"> Sign up </p>\\n              </div>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"form-row mb-n4\\\">\\n                  <div className=\\\"col\\\"><CDBInput label=\\\"First name\\\" type=\\\"text\\\" /></div>\\n                  <div className=\\\"col\\\"><CDBInput label=\\\"Last name\\\" type=\\\"text\\\" /></div>\\n                </div>\\n                <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <p className=\\\"text-muted text-center small mt-n4\\\">At least 8 characters and 1 digit</p>\\n                <CDBInput label=\\\"Password\\\" type=\\\"password\\\" />\\n                <CDBInput label=\\\"Phone number\\\" type=\\\"text\\\" />\\n                <p className=\\\"text-muted text-center small mt-n4\\\">Optional - for two step authentication</p>\\n                <div className=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n                  <CDBCheckbox className=\\\"mr-2\\\"/>\\n                  <p className=\\\"m-0\\\">Subscribe to our newsletter</p>\\n                </div>\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  outline\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Sign up\\n                </CDBBtn>\\n                <p className=\\\"text-center\\\"> or sign up with</p>\\n                <div className=\\\"row mb-3 d-flex justify-content-center\\\">\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"twitter\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"linkedin-in\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                    outline\\n                  >\\n                    <CDBIcon fab icon=\\\"github\\\"/>\\n                  </CDBBtn>\\n                </div>\\n                <p className=\\\"text-center m-0\\\">Already have an account? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Sign In</CDBLink></p>\\n                <hr/>\\n                <p className=\\\"text-center\\\">By clicking <em>Sign up</em> you agree to our <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">terms of service</CDBLink></p>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Default Form Subscription\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-2\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \"Subscribe\")), mdx(\"p\", {\n    className: \"text-center mt-4 font-weight-light\"\n  }, \"Join our mailing list. We write rarely, but only the best content.\"), mdx(\"p\", {\n    className: \"text-center\"\n  }, mdx(\"span\", {\n    className: \"font-weight-light text-primary mb-4\",\n    href: \"#\"\n  }, \"See the last newsletter\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"Name\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"button\", {\n    className: \"btn btn-dark btn-block my-3\"\n  }, \"Subscribe\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4\\\">Subscribe</p>\\n                </div>\\n                <p className=\\\"text-center mt-4 font-weight-light\\\">Join our mailing list. We write rarely, but only the best content.</p>\\n                <CDBLink className=\\\"text-center p-0 font-weight-light\\\" to=\\\"#\\\">See the last newsletter</CDBLink>\\n                <CDBInput material hint=\\\"Name\\\" type=\\\"text\\\" />\\n                <CDBInput material hint=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Subscribe\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Contrast Form Submission\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"text-center text-white\",\n    style: {\n      \"background\": \"black\"\n    }\n  }, mdx(\"p\", {\n    className: \"h5 mt-2 py-4 font-weight-bold\"\n  }, \"Subscribe\")), mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"p\", {\n    className: \"text-center mt-2\"\n  }, \"Join our mailing list. We write rarely, but only the best content.\"), mdx(\"p\", {\n    className: \"text-center\"\n  }, mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"See the last newsletter\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Name\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"button\", {\n    className: \"btn btn-block btn-outline-dark my-3\"\n  }, \"Subscribe\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBLink, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <div className=\\\"text-center text-white\\\" style={{ background: \\\"black\\\" }}>\\n                <p className=\\\"h5 mt-2 py-4 font-weight-bold\\\">Subscribe</p>\\n              </div>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <p className=\\\"text-center mt-2\\\">Join our mailing list. We write rarely, but only the best content.</p>\\n                <CDBLink className=\\\"text-center p-0\\\" to=\\\"#\\\">See the last newsletter</CDBLink>\\n                <CDBInput label=\\\"Name\\\" type=\\\"text\\\" />\\n                <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  outline\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Subscribe\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Default Form Contact\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-5\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \" Contact us \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"Name\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"p\", {\n    className: \"text-center m-0\"\n  }, \"Subject\"), mdx(\"select\", {\n    className: \"select w-100\"\n  }, mdx(\"option\", null, \"Resources\"), mdx(\"option\", null, \"Docs\"), mdx(\"option\", null, \"Contact\")), mdx(\"div\", {\n    className: \"cdb-form mt-4\"\n  }, mdx(\"textarea\", {\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", null, \"Message\")), mdx(\"div\", {\n    className: \"d-flex justify-content-center align-items-center mt-4\"\n  }, mdx(\"input\", {\n    className: \"mr-2\",\n    type: \"checkbox\"\n  }), mdx(\"p\", {\n    className: \"m-0\"\n  }, \"Send me a copy of this message\")), mdx(\"button\", {\n    className: \"btn btn-block btn-dark my-3\"\n  }, \"Send\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBSelect, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n    const option = [\\n    {\\n      text: \\\"Feature request\\\",\\n      value: \\\"1\\\",\\n    },\\n    {\\n      text: \\\"Report a bug\\\",\\n      value: \\\"2\\\",\\n    },\\n    {\\n      text: \\\"Help\\\",\\n      value: \\\"3\\\",\\n      icon:\\\"question-circle\\\",\\n    },\\n  ];\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4\\\"> Contact us </p>\\n                </div>\\n                <CDBInput material hint=\\\"Name\\\" type=\\\"text\\\" />\\n                <CDBInput material hint=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <p className=\\\"text-center m-0\\\">Subject</p>\\n                <CDBSelect options={option} selected=\\\"Feedback\\\"/>\\n                <CDBInput hint=\\\"Message\\\" type=\\\"textarea\\\" />\\n                <div className=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n                  <CDBInput material type=\\\"Checkbox\\\" />\\n                  <p className=\\\"m-0\\\">Send me a copy of this message</p>\\n                </div>\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Send\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Contrast Form Contact\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      \"background\": \"black\"\n    },\n    className: \"text-center text-white mb-4\"\n  }, mdx(\"p\", {\n    className: \"h5 mt-2 py-4 font-weight-bold\"\n  }, \"Contact Us\")), mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Name\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"p\", {\n    className: \"text-center m-0 text-muted\"\n  }, \"Subject\"), mdx(\"select\", {\n    className: \"select w-100\"\n  }, mdx(\"option\", null, \"Resources\"), mdx(\"option\", null, \"Docs\"), mdx(\"option\", null, \"Contact\")), mdx(\"div\", {\n    className: \"cdb-form mt-4\"\n  }, mdx(\"textarea\", {\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Message\")), mdx(\"div\", {\n    className: \"d-flex justify-content-center align-items-center mt-4\"\n  }, mdx(\"input\", {\n    className: \"mr-2\",\n    type: \"checkbox\"\n  }), mdx(\"p\", {\n    className: \"m-0\"\n  }, \"Send me a copy of this message\")), mdx(\"button\", {\n    className: \"btn btn-block btn-outline-dark my-3\"\n  }, \"Send\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBSelect2, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n    const option = [\\n    {\\n      text: \\\"Feature request\\\",\\n      value: \\\"1\\\",\\n    },\\n    {\\n      text: \\\"Report a bug\\\",\\n      value: \\\"2\\\",\\n    },\\n    {\\n      text: \\\"Help\\\",\\n      value: \\\"3\\\",\\n      icon:\\\"question-circle\\\",\\n    },\\n  ];\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <div style={{ background:\\\"black\\\" }} className=\\\"text-center text-white\\\">\\n                <p className=\\\"h5 mt-2 py-4 font-weight-bold\\\">Contact Us</p>\\n              </div>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <CDBInput label=\\\"Name\\\" type=\\\"text\\\" />\\n                <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <p className=\\\"text-center m-0 text-muted\\\">Subject</p>\\n                <CDBSelect2 color=\\\"white\\\" options={option} selected=\\\"Feedback\\\"/>\\n                <CDBInput label=\\\"Message\\\" type=\\\"textarea\\\" />\\n                <div className=\\\"d-flex justify-content-center align-items-center mt-4\\\">\\n                  <CDBInput type=\\\"Checkbox\\\" />\\n                  <p className=\\\"m-0\\\">Send me a copy of this message</p>\\n                </div>\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  outline\\n                  className=\\\"btn-block my-3 mx-0\\\" >\\n                    Send\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Login Form with Icons\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center my-4\"\n  }, mdx(\"p\", {\n    className: \"h4 font-weight-bold\"\n  }, \" Sign in \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-envelope prefix\"\n  }), mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-lock prefix\"\n  }), mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-success btn-block mt-5 mx-auto\"\n  }, \"Login\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4 font-weight-bold\\\"> Sign in </p>\\n                </div>\\n                <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\" icon=\\\"envelope\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Password\\\" type=\\\"password\\\" icon=\\\"lock\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBBtn\\n                  color=\\\"success\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                    Login\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Login Form with Outside Label\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-4\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \" Sign in \")), mdx(\"label\", {\n    htmlFor: \"defaultLoginEmail\",\n    className: \"text-muted\"\n  }, \"Your email\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    id: \"defaultLoginEmail\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"defaultLoginPassword\",\n    className: \"text-muted\"\n  }, \"Your password\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    id: \"defaultLoginPassword\",\n    className: \"form-control\"\n  })), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-primary btn-block mt-5 mx-auto\"\n  }, \"Login\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-4\\\">\\n                  <p className=\\\"h4\\\"> Sign in </p>\\n                </div>\\n                <label htmlFor=\\\"defaultLoginEmail\\\" className=\\\"text-muted m-0\\\">\\n                  Your email\\n                </label>\\n                <CDBInput id=\\\"defaultLoginEmail\\\" className=\\\"mt-n3\\\" type=\\\"email\\\" />\\n                <label htmlFor=\\\"defaultLoginPassword\\\" className=\\\"text-muted m-0\\\">\\n                  Your password\\n                </label>\\n                <CDBInput id=\\\"defaultLoginPassword\\\" className=\\\"mt-n3\\\" type=\\\"password\\\" />\\n                <CDBBtn\\n                  color=\\\"primary\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                    Login\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Sign Up Form with Icon\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center my-4\"\n  }, mdx(\"p\", {\n    className: \"h4 font-weight-bold\"\n  }, \" Sign in \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-user prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your name\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-envelope prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your Email\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-exclamation-triangle prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Confirm your Email\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-lock prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your Password\")), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-primary btn-block mt-5 mx-auto\"\n  }, \"Register\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4 font-weight-bold\\\"> Sign up </p>\\n                </div>\\n                <CDBInput label=\\\"Your name\\\" type=\\\"text\\\" icon=\\\"user\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Your email\\\" type=\\\"email\\\" icon=\\\"envelope\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Confirm your email\\\" type=\\\"email\\\" icon=\\\"exclamation-triangle\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Your Password\\\" type=\\\"password\\\" icon=\\\"lock\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBBtn\\n                  color=\\\"primary\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                    Register\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Sign Up Form Outside Label\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-4\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \" Sign in \")), mdx(\"label\", {\n    htmlFor: \"defaultLoginName\",\n    className: \"text-muted\"\n  }, \"Your name\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    id: \"defaultLoginName\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"defaultLoginEmail1\",\n    className: \"text-muted\"\n  }, \"Your email\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    id: \"defaultLoginEmail1\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"confirmLoginEmail1\",\n    className: \"text-muted\"\n  }, \"Confirm your Email\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    id: \"confirmLoginEmail1\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"defaultLoginPassword1\",\n    className: \"text-muted\"\n  }, \"Your password\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    id: \"defaultLoginPassword1\",\n    className: \"form-control\"\n  })), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-danger btn-block mt-5 mx-auto\"\n  }, \"Register\")))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4\\\"> Sign up </p>\\n                </div>\\n                <label htmlFor=\\\"defaultRegisterName\\\" className=\\\"text-muted m-0\\\">\\n                  Your name\\n                </label>\\n                <CDBInput id=\\\"defaultRegisterName\\\" className=\\\"mt-n3\\\" type=\\\"text\\\" />\\n                <label htmlFor=\\\"defaultRegisterEmail\\\" className=\\\"text-muted m-0\\\">\\n                  Your email\\n                </label>\\n                <CDBInput id=\\\"defaultRegisterEmail\\\" className=\\\"mt-n3\\\" type=\\\"email\\\" />\\n                <label htmlFor=\\\"defaultRegisterEmailConfirm\\\" className=\\\"text-muted m-0\\\">\\n                  Confirm your email\\n                </label>\\n                <CDBInput id=\\\"defaultRegisterEmailConfirm\\\" className=\\\"mt-n3\\\" type=\\\"email\\\" />\\n                <label htmlFor=\\\"defaultRegisterPassword\\\" className=\\\"text-muted m-0\\\">\\n                  Your password\\n                </label>\\n                <CDBInput id=\\\"defaultRegisterPassword\\\" className=\\\"mt-n3\\\" type=\\\"password\\\"/>\\n                <CDBBtn\\n                  color=\\\"danger\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                    Register\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Subscription Form with Icon\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center my-4\"\n  }, mdx(\"p\", {\n    className: \"h4 font-weight-bold\"\n  }, \" Subscribe \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-user prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your Name\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-envelope prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your Email\")), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-outline-primary btn-block mt-5 mx-auto\"\n  }, \"Send\", mdx(\"i\", {\n    className: \"fa fa-paper-plane\"\n  }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4 font-weight-bold\\\"> Subscribe </p>\\n                </div>\\n                <CDBInput label=\\\"Your name\\\" type=\\\"text\\\" icon=\\\"user\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Your email\\\" type=\\\"email\\\" icon=\\\"envelope\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBBtn\\n                  outline\\n                  color=\\\"primary\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                  Send\\n                  <CDBIcon far icon=\\\"paper-plane\\\"/>\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Subscription Form with Outside Label\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-4\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \" Subscribe \")), mdx(\"label\", {\n    htmlFor: \"defaultLoginName2\",\n    className: \"text-muted\"\n  }, \"Your Name\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    id: \"defaultLoginName2\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"defaultLoginEmail2\",\n    className: \"text-muted\"\n  }, \"Your email\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    id: \"defaultLoginEmail2\",\n    className: \"form-control\"\n  })), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-outline-danger btn-block mt-5 mx-auto\"\n  }, \"Send\", mdx(\"i\", {\n    className: \"fa fa-paper-plane\"\n  }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4\\\"> Subscribe </p>\\n                </div>\\n                <label htmlFor=\\\"defaultSubscribeName\\\" className=\\\"text-muted m-0\\\">\\n                  Your name\\n                </label>\\n                <CDBInput id=\\\"defaultSubscribeName\\\" className=\\\"mt-n3\\\" type=\\\"text\\\" />\\n                <label htmlFor=\\\"defaultSubscribeEmail\\\" className=\\\"text-muted m-0\\\">\\n                  Your email\\n                </label>\\n                <CDBInput id=\\\"defaultSubscribeEmail\\\" className=\\\"mt-n3\\\" type=\\\"email\\\" />\\n                <CDBBtn\\n                  outline\\n                  color=\\\"danger\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                  Send\\n                  <CDBIcon far icon=\\\"paper-plane\\\"/>\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Contact Form with Icon\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center my-4\"\n  }, mdx(\"p\", {\n    className: \"h4 font-weight-bold\"\n  }, \" Write to us \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-user prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your name\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-envelope prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your Email\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-tags prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Subject\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"i\", {\n    className: \"fa fa-envelope prefix text-muted\"\n  }), mdx(\"input\", {\n    type: \"text\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Your Message\")), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-outline-secondary btn-block mt-5 mx-auto\"\n  }, \"Send\", mdx(\"i\", {\n    className: \"fa fa-paper-plane\"\n  }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4 font-weight-bold\\\"> Write to Us </p>\\n                </div>\\n                <CDBInput label=\\\"Your name\\\" type=\\\"text\\\" icon=\\\"user\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Your email\\\" type=\\\"email\\\" icon=\\\"envelope\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Subject\\\" type=\\\"text\\\" icon=\\\"tags\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBInput label=\\\"Your message\\\" type=\\\"textarea\\\" icon=\\\"pencil-alt\\\" iconClass=\\\"text-muted\\\"/>\\n                <CDBBtn\\n                  outline\\n                  color=\\\"secondary\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                  Send\\n                  <CDBIcon far icon=\\\"paper-plane\\\"/>\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Contact Form without Icon\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center mt-4 mb-4\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \" Write to us \")), mdx(\"label\", {\n    htmlFor: \"defaultLoginName3\",\n    className: \"text-muted\"\n  }, \"Your name\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    id: \"defaultLoginName3\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"defaultLoginEmail3\",\n    className: \"text-muted\"\n  }, \"Your email\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    id: \"defaultLoginEmail3\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"confirmLoginEmail3\",\n    className: \"text-muted\"\n  }, \"Subject\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"text\",\n    id: \"confirmLoginEmail3\",\n    className: \"form-control\"\n  })), mdx(\"label\", {\n    htmlFor: \"defaultLoginPassword3\",\n    className: \"text-muted\"\n  }, \"Your message\"), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"textarea\", {\n    id: \"defaultLoginPassword3\",\n    className: \"form-control\"\n  })), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\"\n    },\n    className: \"btn btn-outline-secondary btn-block mt-5 mx-auto\"\n  }, \"Send\", mdx(\"i\", {\n    className: \"fa fa-paper-plane\"\n  }))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-4\\\">\\n                  <p className=\\\"h4\\\"> Write to Us </p>\\n                </div>\\n                <label htmlFor=\\\"defaultContactName\\\" className=\\\"text-muted m-0\\\">\\n                  Your name\\n                </label>\\n                <CDBInput id=\\\"defaultContactName\\\" className=\\\"mt-n3\\\" type=\\\"text\\\" />\\n                <label htmlFor=\\\"defaultContactEmail\\\" className=\\\"text-muted m-0\\\">\\n                  Your email\\n                </label>\\n                <CDBInput id=\\\"defaultContactEmail\\\" className=\\\"mt-n3\\\" type=\\\"email\\\" />\\n                <label htmlFor=\\\"defaultContactSubject\\\" className=\\\"text-muted m-0\\\">\\n                  Subject\\n                </label>\\n                <CDBInput id=\\\"defaultContactSubject\\\" className=\\\"mt-n3\\\" type=\\\"text\\\" />\\n                <label htmlFor=\\\"defaultContactMessage\\\" className=\\\"text-muted m-0\\\">\\n                  Your message\\n                </label>\\n                <CDBInput id=\\\"defaultContactMessage\\\" className=\\\"mt-n3\\\" type=\\\"textarea\\\" />\\n                <CDBBtn\\n                  outline\\n                  color=\\\"secondary\\\"\\n                  style={{width:\\\"40%\\\"}}\\n                  className=\\\"btn-block mt-5 mx-auto\\\" >\\n                  Send\\n                  <CDBIcon far icon=\\\"paper-plane\\\"/>\\n                </CDBBtn>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Form Login\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center my-4\"\n  }, mdx(\"p\", {\n    className: \"h4 font-weight-bold\"\n  }, \" Sign in \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"p\", {\n    className: \"mt-n3 text-right\"\n  }, mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Forgot Password ?\")), mdx(\"button\", {\n    className: \"btn btn-dark btn-block my-4 mx-0\"\n  }, \"Sign in\"), mdx(\"p\", {\n    className: \"text-center\"\n  }, \" or sign in with\"), mdx(\"div\", {\n    className: \"my-3 d-flex justify-content-center\"\n  }, mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-google-plus-g\"\n  }))), mdx(\"hr\", null), mdx(\"p\", {\n    className: \"text-center\"\n  }, \"Not a member? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Sign up\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4 font-weight-bold\\\"> Sign in </p>\\n                </div>\\n                <CDBInput label =\\\"E-mail\\\" type=\\\"email\\\" />\\n                <CDBInput label =\\\"Password\\\" type=\\\"password\\\" />\\n                <p className=\\\"mt-n3 text-right\\\"><CDBLink className=\\\"p-0\\\" to=\\\"#\\\">Forgot Password ?</CDBLink></p>\\n                <CDBBtn\\n                  color=\\\"dark\\\"\\n                  className=\\\"btn-block my-4 mx-0\\\" >\\n                    Sign in\\n                </CDBBtn>\\n                <p className=\\\"text-center\\\"> or sign in with</p>\\n                <div className=\\\"row my-3 d-flex justify-content-center\\\">\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                  >\\n                    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                  >\\n                    <CDBIcon fab icon=\\\"twitter\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"white\\\"\\n                    className=\\\"m-0\\\"\\n                  >\\n                    <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n                  </CDBBtn>\\n                </div>\\n                <hr/>\\n                <p className=\\\"text-center\\\">Not a member? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Sign up</CDBLink></p>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Sign Up\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"text-center my-4\"\n  }, mdx(\"p\", {\n    className: \"h4\"\n  }, \" Sign up \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"div\", {\n    className: \"d-flex align-items-center\"\n  }, mdx(\"input\", {\n    type: \"checkbox\"\n  }), mdx(\"p\", {\n    className: \"mb-0 ml-3\"\n  }, \"Accept the \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"terms and conditions\"))), mdx(\"div\", {\n    className: \"d-flex mt-4 align-items-center\"\n  }, mdx(\"button\", {\n    style: {\n      \"width\": \"30%\",\n      \"background\": \"linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%)\"\n    },\n    className: \"btn btn-block\"\n  }, \"Sign up\"), mdx(\"p\", {\n    className: \"ml-auto mb-0\"\n  }, \"Have an account? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Log in\")))), mdx(\"div\", {\n    className: \"pt-4\",\n    style: {\n      \"background\": \"linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%)\"\n    }\n  }, mdx(\"p\", {\n    className: \"text-center m-0\"\n  }, \" or sign up with\"), mdx(\"div\", {\n    className: \"mb-3 d-flex justify-content-center\"\n  }, mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn\"\n  }, mdx(\"i\", {\n    className: \"fab fa-google-plus-g\"\n  })))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCheckbox, CDBCardBody, CDBLink,CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <div className=\\\"text-center mt-4 mb-2\\\">\\n                  <p className=\\\"h4\\\"> Sign up </p>\\n                </div>\\n                <CDBInput label =\\\"E-mail\\\" type=\\\"email\\\" />\\n                <CDBInput label =\\\"Password\\\" type=\\\"password\\\" />\\n                <div className=\\\"d-flex align-items-center\\\">\\n                  <CDBCheckbox className=\\\"mr-2\\\"/>\\n                  <p className=\\\"mb-0 ml-2\\\">Accept the <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">terms and conditions</CDBLink></p>\\n                </div>\\n                <div className=\\\"d-flex mt-4 align-items-center\\\">\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    style={{width:\\\"30%\\\", background:\\\"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\"}}\\n                    className=\\\"btn-block mx-0\\\" >\\n                      Sign up\\n                  </CDBBtn>\\n                  <p className=\\\"ml-auto mb-0\\\">Have an account? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Log in</CDBLink></p>\\n                </div>\\n              </CDBCardBody>\\n              <div className=\\\"pt-4\\\" style={{background:\\\"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\"}}>\\n                <p className=\\\"text-center m-0\\\"> or sign up with</p>\\n                <div className=\\\"row mb-3 d-flex justify-content-center\\\">\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    className=\\\"m-0\\\"\\n                  >\\n                    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    className=\\\"m-0\\\"\\n                  >\\n                    <CDBIcon fab icon=\\\"twitter\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    className=\\\"m-0\\\"\\n                  >\\n                    <CDBIcon fab icon=\\\"google-plus-g\\\"/>\\n                  </CDBBtn>\\n                </div>\\n              </div>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Login Form\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column\",\n    style: {\n      \"width\": \"30rem\"\n    }\n  }, mdx(\"div\", {\n    style: {\n      \"background\": \"linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%)\"\n    },\n    className: \"text-center mb-4\"\n  }, mdx(\"p\", {\n    className: \"h5 mt-2 mt-5 mb-2 font-weight-bold\"\n  }, \"Login\"), mdx(\"div\", {\n    className: \"mb-3 d-flex justify-content-center\"\n  }, mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-facebook-f\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-twitter\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-linkedin-in\"\n  })), mdx(\"button\", {\n    className: \"m-0 btn btn-flat\"\n  }, mdx(\"i\", {\n    className: \"fab fa-github\"\n  })))), mdx(\"div\", {\n    className: \"mx-4 p-3\"\n  }, mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control\"\n  }), mdx(\"label\", null, \"Password\")), mdx(\"p\", {\n    className: \"text-right\"\n  }, \"Forgot \", mdx(\"span\", {\n    className: \"text-primary ml-auto\",\n    href: \"#\"\n  }, \"Password ?\")), mdx(\"button\", {\n    style: {\n      \"width\": \"40%\",\n      \"background\": \"linear-gradient(0deg, rgba(152,117,196,1) 0%, rgba(169,208,213,0.8746849081429446) 100%)\"\n    },\n    className: \"btn btn-block my-3 mx-0 font-weight-bold\"\n  }, \"Login\"), mdx(\"p\", {\n    className: \" text-right mt-4\"\n  }, \"Don't have an account? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Sign Up\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBLink,CDBIcon, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\" }}>\\n              <div style={{ background:\\\"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\" }} className=\\\"text-center\\\">\\n                <p className=\\\"h5 mt-2 mt-5 mb-2 font-weight-bold\\\">Login</p>\\n                <div className=\\\"row mb-3 d-flex justify-content-center\\\">\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    className=\\\"m-0\\\"\\n                    flat\\n                  >\\n                    <CDBIcon fab icon=\\\"facebook-f\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    className=\\\"m-0\\\"\\n                    flat\\n                  >\\n                    <CDBIcon fab icon=\\\"twitter\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    className=\\\"m-0\\\"\\n                    flat\\n                  >\\n                    <CDBIcon fab icon=\\\"linkedin-in\\\" />\\n                  </CDBBtn>\\n                  <CDBBtn\\n                    color=\\\"none\\\"\\n                    className=\\\"m-0\\\"\\n                    flat\\n                  >\\n                    <CDBIcon fab icon=\\\"github\\\"/>\\n                  </CDBBtn>\\n                </div>\\n              </div>\\n              <CDBCardBody className=\\\"mx-4\\\">\\n                <CDBInput label=\\\"E-mail\\\" type=\\\"email\\\" />\\n                <CDBInput label=\\\"Password\\\" type=\\\"password\\\" />\\n                <p className=\\\"text-right\\\">Forgot <CDBLink className=\\\"d-inline p-0 ml-auto\\\" to=\\\"#\\\">Password ?</CDBLink></p>\\n                <CDBBtn\\n                color=\\\"none\\\"\\n                  style={{width:\\\"40%\\\", background:\\\"linear-gradient(0deg, rgba(37,212,214,1) 0%, rgba(110,112,200,1) 100%)\\\"}}\\n                  className=\\\"btn-block my-3 mx-0 font-weight-bold\\\" >\\n                    Login\\n                </CDBBtn>\\n                <p className=\\\" text-right mt-4\\\">Don't have an account? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Sign Up</CDBLink></p>\\n\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h2\", null, \"Sign Up with Background Image\"), mdx(\"div\", {\n    className: \"container\"\n  }, mdx(\"div\", {\n    className: \"border d-flex flex-column view\",\n    style: {\n      \"width\": \"30rem\",\n      \"background\": \"url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJh)\",\n      \"backgroundSize\": \"cover\"\n    }\n  }, mdx(\"div\", {\n    className: \"mask rgba-dark-strong\"\n  }), mdx(\"div\", {\n    className: \"mx-4 p-3\",\n    style: {\n      \"zIndex\": \"2\"\n    }\n  }, mdx(\"div\", {\n    className: \"text-center my-5\"\n  }, mdx(\"p\", {\n    className: \"h4 font-weight-bold text-white\"\n  }, \" Sign up \")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"email\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", {\n    className: \"bg-transparent\"\n  }, \"E-mail\")), mdx(\"div\", {\n    className: \"cdb-form\"\n  }, mdx(\"input\", {\n    type: \"password\",\n    className: \"form-control border-top-0 border-left-0 border-right-0\"\n  }), mdx(\"label\", {\n    className: \"bg-transparent\"\n  }, \"Password\")), mdx(\"div\", {\n    className: \"d-flex mt-3 align-items-center justify-content-center\"\n  }, mdx(\"input\", {\n    type: \"checkbox\"\n  }), mdx(\"p\", {\n    className: \"text-white mb-0 ml-2\"\n  }, \"Accept the \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"terms and conditions\"))), mdx(\"button\", {\n    className: \"btn btn-block my-4\"\n  }, \"Sign up\"), mdx(\"p\", {\n    className: \"text-white text-center mb-5\"\n  }, \"Have an account? \", mdx(\"span\", {\n    className: \"text-primary\",\n    href: \"#\"\n  }, \"Log in\"))))), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import React from \\\"react\\\";\\nimport { CDBInput, CDBCard, CDBCardBody, CDBLink, CDBMask, CDBCheckbox, CDBBtn, CDBContainer } from \\\"cdbreact\\\";\\n\\nconst Forms = () => {\\n  return (\\n    <CDBContainer>\\n            <CDBCard style={{ width: \\\"30rem\\\", background:\\\"url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJh)\\\", backgroundSize:\\\"cover\\\"}}>\\n              <CDBMask overlay=\\\"darkStrong\\\" className=\\\"flex-center\\\" />\\n              <CDBCardBody className=\\\"mx-4\\\" style={{zIndex:\\\"2\\\"}}>\\n                <div className=\\\"text-center mt-5 mb-2\\\">\\n                  <p className=\\\"h4 font-weight-bold text-white\\\"> Sign up </p>\\n                </div>\\n                <CDBInput material label =\\\"E-mail\\\" type=\\\"email\\\" />\\n                <CDBInput material label =\\\"Password\\\" type=\\\"password\\\" />\\n                <div className=\\\"d-flex mt-3 align-items-center justify-content-center\\\">\\n                  <CDBCheckbox/>\\n                  <p className=\\\"text-white mb-0 ml-2\\\">Accept the <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">terms and conditions</CDBLink></p>\\n                </div>\\n                <CDBBtn\\n                  color=\\\"primary\\\"\\n                  className=\\\"btn-block mx-0 my-4\\\" >\\n                    Sign up\\n                </CDBBtn>\\n                <p className=\\\"text-white text-center mb-5\\\">Have an account? <CDBLink className=\\\"d-inline p-0\\\" to=\\\"#\\\">Log in</CDBLink></p>\\n              </CDBCardBody>\\n            </CDBCard>\\n    </CDBContainer>\\n  );\\n};\\nexport default  Forms;\\n\")), mdx(\"h1\", null, \"API\"), mdx(\"p\", null, \"In this section you will find advanced information about the Forms component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.\"), mdx(\"h2\", null, \"Contrast Forms Import Statement\"), mdx(\"p\", null, \"You need to import the proper component first.\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-javascript\"\n  }), \"import { CDBInput, CDBCard, CDBCardBody, CDBIcon, CDBBtn, CDBLink, CDBContainer } from \\\"cdbreact\\\";\\n\")), mdx(\"p\", null, \"API Reference: Contrast Input Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBInput component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default input tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput tag=\\\"input\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"containerClass\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom class to wrapping div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput containerClass=\\\"wrapper\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"error\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the error message for the labels data-error attribute\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput error=\\\"Ouch!\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hint\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the placeholder for the Input\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput hint=\\\"Placeholder\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"value\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number, Boolean or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"The value of the input element (use with the controlled input)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput value=\\\"I am controlled\\\" onChange={this.handleChange} ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"material\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes component styles for material theme\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput material .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"valueDefault\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Number or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"The default value of the input (use with the uncontrolled input)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput valueDefault=\\\"I am uncontrolled\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"id\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Required! Set the id of the input element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput id=\\\"myId\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"label\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Add label to the component; you can attach jsx elements (f.e. links)\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput label=\\\"My custom input\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"labelClass\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Add custom class to label\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput labelClass=\\\"My custom label class\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"labelId\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets custom id to label\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput labelId=\\\"myId\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"size\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"lg\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes size of the component; available \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"lg\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"sm\")), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput size=\\\"lg\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"success\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the success message for the labels data-success attribute\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput success=\\\"Great!\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"type\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"text\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"The type of the input element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput type=\\\"checkbox\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"inputRef\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Object or function\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Allows to attach React Ref to the input component; accepts only Callback Ref\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput inputRef={ref => this.myRef = ref } .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds font awesome icon\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput icon=\\\"caret-right\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconBrand\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Use this property to set brand icon (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fab\"), \")\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput icon=\\\"twitter\\\" iconBrand ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconLight\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Use this property to set light icon (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fal\"), \")\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput icon=\\\"twitter\\\" iconLight ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconRegular\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Use this property to set regular icon (\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"far\"), \")\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput icon=\\\"twitter\\\" iconRegular ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"iconClass\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes to icon element\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput icon=\\\"caret-right\\\" iconClass=\\\"my-class\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"disable\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Disables Input component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput disabled .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"group\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Add .form-group class to the wrapping div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput error .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"filled\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Add filled-in style to checkbox/radio button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput type=\\\"checkbox\\\" filled .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"validate\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \".validate\"), \" class to the Input component\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput validate .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"gap\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Creates gap inside checkbox/radio button\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBInput type=\\\"checkbox\\\" gap .../>\")))), mdx(\"p\", null, \"API Reference: Contrast Card Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCard component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCard className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default input tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCard tag=\\\"div\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets background color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCard color=\\\"dark\\\" .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"border\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Gives border\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCard border .../>\")))), mdx(\"p\", null, \"API Reference: Contrast Card Body Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardBody component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardBody className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"div\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardBody tag=\\\"div\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"cascade\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Switches the CardBody to cascade style mode\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardBody cascade .../>\")))), mdx(\"p\", null, \"API Reference: Contrast Card Image Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardImage component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardImage className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"img\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardImage tag=\\\"div\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"cascade\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Switches the CardBody to cascade style mode\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardImage cascade .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"hover\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Switches on hover behaviour\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardImage hover .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"overlay\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"white-light\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Sets the color of hover overlay\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardImage overlay=\\\"white-light\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"src\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Source of the image\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardImage src=\\\"image_src\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"top\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Makes image fluid\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardImage top .../>\")))), mdx(\"p\", null, \"API Reference: Contrast Card Text Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardText component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardText className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"p\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardText tag=\\\"p\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"muted\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Mutes the text color\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardText muted .../>\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"small\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Uses html \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"small\"), \" as component's tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardText small .../>\")))), mdx(\"p\", null, \"API Reference: Contrast Card Title Properties\"), mdx(\"p\", null, \"The table below shows the configuration options of the CDBCardTitle component.\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"Name\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Type\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Default\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Description\"), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"Example\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"className\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  })), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Adds custom classes\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardTitle className=\\\"myClass\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"function or String\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"h4\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Changes default \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"html\"), \" tag\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardTitle tag=\\\"h1\\\" ... />\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), \"sub\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Boolean\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"false\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"center\"\n  }), \"Styles title as subtitle\"), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), \"<CDBCardTitle sub .../>\")))));\n}\n;\nMDXContent.isMDXComponent = true;","tableOfContents":{"items":[{"url":"#forms","title":"Forms","items":[{"url":"#default-form-login","title":"Default Form Login"},{"url":"#contrast-form-login","title":"Contrast Form Login"},{"url":"#default-form-register","title":"Default Form Register"},{"url":"#contrast-form-register","title":"Contrast Form Register"},{"url":"#default-form-subscription","title":"Default Form Subscription"},{"url":"#contrast-form-submission","title":"Contrast Form Submission"},{"url":"#default-form-contact","title":"Default Form Contact"},{"url":"#contrast-form-contact","title":"Contrast Form Contact"},{"url":"#login-form-with-icons","title":"Login Form with Icons"},{"url":"#login-form-with-outside-label","title":"Login Form with Outside Label"},{"url":"#sign-up-form-with-icon","title":"Sign Up Form with Icon"},{"url":"#sign-up-form-outside-label","title":"Sign Up Form Outside Label"},{"url":"#subscription-form-with-icon","title":"Subscription Form with Icon"},{"url":"#subscription-form-with-outside-label","title":"Subscription Form with Outside Label"},{"url":"#contact-form-with-icon","title":"Contact Form with Icon"},{"url":"#contact-form-without-icon","title":"Contact Form without Icon"},{"url":"#form-login","title":"Form Login"},{"url":"#sign-up","title":"Sign Up"},{"url":"#login-form","title":"Login Form"},{"url":"#sign-up-with-background-image","title":"Sign Up with Background Image"}]},{"url":"#api","title":"API","items":[{"url":"#contrast-forms-import-statement","title":"Contrast Forms Import Statement"}]}]},"parent":{"__typename":"File","relativePath":"contrast/react/forms.mdx"},"frontmatter":{"metaTitle":"Contrast Bootstrap React Forms","metaDescription":"These are Contrast Bootstrap React Components "}},"allMdx":{"edges":[{"node":{"fields":{"slug":"/contrast/angular/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/angular/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/javascript/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/angular/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/javascript/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/Installation","title":"Installation"}}},{"node":{"fields":{"slug":"/contrast/react/components","title":"Components"}}},{"node":{"fields":{"slug":"/contrast/react/index","title":"Getting Started"}}},{"node":{"fields":{"slug":"/contrast/angular/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/sections","title":"Sections"}}},{"node":{"fields":{"slug":"/contrast/react/navigation","title":"Navigation"}}},{"node":{"fields":{"slug":"/contrast/react/chart","title":"Charts"}}},{"node":{"fields":{"slug":"/contrast/react/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/angular/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/react/custom_pages","title":"Custom Pages"}}},{"node":{"fields":{"slug":"/contrast/angular/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/widgets","title":"Widgets"}}},{"node":{"fields":{"slug":"/contrast/angular/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/angular/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/angular/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/angular/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/angular/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/angular/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/angular/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/angular/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/angular/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/angular/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/angular/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/angular/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/angular/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/angular/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/angular/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/angular/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/angular/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/angular/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/angular/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/angular/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/angular/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/angular/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/angular/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/angular/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/sidebar2","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/angular/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/angular/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/angular/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/angular/table/fixed_datatables","title":"Fixed DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/angular/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/alert","title":"Alert"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/angular/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/angular/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/popover","title":"PopOver"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/angular/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/javascript/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/sidebar","title":"Sidebar2"}}},{"node":{"fields":{"slug":"/contrast/javascript/components/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/javascript/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/components/alert","title":"React Alert"}}},{"node":{"fields":{"slug":"/contrast/react/components/accordion","title":"Accordion"}}},{"node":{"fields":{"slug":"/contrast/react/components/animations","title":"Animation"}}},{"node":{"fields":{"slug":"/contrast/react/components/autocomplete","title":"Autocomplete"}}},{"node":{"fields":{"slug":"/contrast/react/components/box","title":"Box"}}},{"node":{"fields":{"slug":"/contrast/react/components/badge","title":"Badges"}}},{"node":{"fields":{"slug":"/contrast/react/components/breadcrumb","title":"Breadcrumb"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonToolbar","title":"ButtonToolbar"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttonGroup","title":"ButtonGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/carousel","title":"Carousel"}}},{"node":{"fields":{"slug":"/contrast/react/components/checkbox","title":"Checkbox"}}},{"node":{"fields":{"slug":"/contrast/react/components/buttons","title":"Button"}}},{"node":{"fields":{"slug":"/contrast/react/components/collapse","title":"Collapse"}}},{"node":{"fields":{"slug":"/contrast/react/components/icon","title":"Icon"}}},{"node":{"fields":{"slug":"/contrast/react/components/dropdown","title":"DropDown"}}},{"node":{"fields":{"slug":"/contrast/react/components/input","title":"Input"}}},{"node":{"fields":{"slug":"/contrast/react/components/inputgroup","title":"InputGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/iframe","title":"Iframe"}}},{"node":{"fields":{"slug":"/contrast/react/components/card","title":"Card"}}},{"node":{"fields":{"slug":"/contrast/react/components/footer","title":"Footer"}}},{"node":{"fields":{"slug":"/contrast/react/components/mask","title":"Mask"}}},{"node":{"fields":{"slug":"/contrast/react/components/multiselect","title":"Multiselect"}}},{"node":{"fields":{"slug":"/contrast/react/components/notification","title":"Notification"}}},{"node":{"fields":{"slug":"/contrast/react/components/listgroup","title":"LIstGroup"}}},{"node":{"fields":{"slug":"/contrast/react/components/pane","title":"Pane"}}},{"node":{"fields":{"slug":"/contrast/react/components/progress","title":"Progress"}}},{"node":{"fields":{"slug":"/contrast/react/components/rating","title":"Rating"}}},{"node":{"fields":{"slug":"/contrast/react/components/modal","title":"Modal"}}},{"node":{"fields":{"slug":"/contrast/react/components/select","title":"Select"}}},{"node":{"fields":{"slug":"/contrast/react/components/radio","title":"Radio"}}},{"node":{"fields":{"slug":"/contrast/react/components/slider","title":"Slider"}}},{"node":{"fields":{"slug":"/contrast/react/components/panels","title":"Panel"}}},{"node":{"fields":{"slug":"/contrast/react/components/select2","title":"Select 2"}}},{"node":{"fields":{"slug":"/contrast/react/components/smoothscroll","title":"SmoothScroll"}}},{"node":{"fields":{"slug":"/contrast/react/components/spinner","title":"Spinner"}}},{"node":{"fields":{"slug":"/contrast/react/components/switch","title":"Switch"}}},{"node":{"fields":{"slug":"/contrast/react/components/stepper","title":"Stepper"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/navbar","title":"Navbar"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/pagination","title":"Pagination"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/sidebar","title":"Sidebar"}}},{"node":{"fields":{"slug":"/contrast/react/sections/fileuploader","title":"FileUploader"}}},{"node":{"fields":{"slug":"/contrast/react/sections/datepicker","title":"DatePicker"}}},{"node":{"fields":{"slug":"/contrast/react/sections/timepicker","title":"TimePicker"}}},{"node":{"fields":{"slug":"/contrast/react/table/editabletable","title":"EditableTable"}}},{"node":{"fields":{"slug":"/contrast/react/navigation/tabs","title":"Tab"}}},{"node":{"fields":{"slug":"/contrast/react/table/table","title":"Table"}}},{"node":{"fields":{"slug":"/contrast/react/forms","title":"Forms"}}},{"node":{"fields":{"slug":"/contrast/react/table/datatables","title":"DataTable"}}},{"node":{"fields":{"slug":"/bootstrap-5-major-changes","title":"Major changes to bootstrap 5"}}},{"node":{"fields":{"slug":"/bootstrap-5-navbar-using-contrast","title":"How To Create A Beautiful Navbar Using Bootstrap And Contrast"}}},{"node":{"fields":{"slug":"/using-bootstrap-in-react","title":"How to use Bootstrap in React Using a React Library"}}}]}},"pageContext":{"id":"17197e91-ec77-5e4c-a166-33d2e82aaa76"}},"staticQueryHashes":["2619113677","2619113677","2619113677","3706406642","3706406642","417421954","417421954"]}