Sign In

Skip to component content

Moo UI

Credentials

Enter your email and password to continue.

Email *

Password *

Remember me

Forgot your password?

Don't have an account? Sign up

Back to Examples

Demo only — this form does not submit anywhere or store any data. Built with the Card, Form, Field, Input, Checkbox, and Button components.

{"title": "Moo UI \u2014 Sign in", "description": "A full-bleed Sign In screen built entirely from Moo UI Card, Form, Field, Input, Checkbox, and Button components.", "html": "<div class=\"moo-ui\" data-bs-theme=\"light\">\n<div class=\"moo-auth-page\">\n    <main class=\"moo-auth-page__content\" id=\"main-content\" tabindex=\"-1\">\n      <div class=\"moo-auth-page__inner\">\n        <a class=\"moo-auth-page__brand\" href=\"https://ui.wpmoo.org/\">\n          <span class=\"sidebar-brand-mark sidebar-brand-mark--primary\"><svg\n  data-icon=\"inline-start\"\n  data-lucide=\"blocks\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  aria-hidden=\"true\"\n>\n  <g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"><path d=\"M10 22V7a1 1 0 0 0-1-1H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5a1 1 0 0 0-1-1H2\"/><rect width=\"8\" height=\"8\" x=\"14\" y=\"2\" rx=\"1\"/></g>\n</svg></span>\n          <span>Moo UI</span>\n        </a>\n\n  <div class=\"card moo-auth-page__card\">\n      <div class=\"card-header\">\n          <div class=\"card-header__text\">\n<h3 class=\"card-title\">Sign in</h3>          </div>\n      </div>\n    <div class=\"card-body\">\n      <form class=\"field-form d-grid gap-4\">\n    <fieldset class=\"field-fieldset\">\n    <legend class=\"field-legend\">Credentials</legend>\n<div class=\"field-description form-text\">Enter your email and password to continue.</div>    <div class=\"field-group\">\n    <div class=\"field\">\n    <label class=\"form-label\" for=\"sign-in-email\">Email <span class=\"text-danger\">*</span></label>  <input class=\"form-control\" id=\"sign-in-email\" type=\"email\" placeholder=\"name@example.com\" required>\n  </div><div class=\"field\">\n    <label class=\"form-label\" for=\"sign-in-password\">Password <span class=\"text-danger\">*</span></label>  <input class=\"form-control\" id=\"sign-in-password\" type=\"password\" required>\n  </div>\n  </div>\n  </fieldset>            <div class=\"d-flex align-items-center justify-content-between\">\n                <div class=\"form-check\">\n    <input class=\"form-check-input\" type=\"checkbox\" id=\"sign-in-remember\">\n<label class=\"form-check-label\" for=\"sign-in-remember\">Remember me</label>  </div>\n              <a class=\"small\" href=\"https://ui.wpmoo.org/examples/auth/forgot-password/\">Forgot your password?</a>\n            </div>\n            \n    <button class=\"btn btn-primary w-100\" type=\"button\">\n<svg\n  data-icon=\"inline-start\"\n  data-lucide=\"log-in\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  aria-hidden=\"true\"\n>\n  <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m10 17l5-5l-5-5m5 5H3m12-9h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4\"/>\n</svg>      Sign in\n    </button>\n  </form>          <p class=\"moo-auth-page__footnote text-body-secondary small mt-4 mb-0\">\n            Don't have an account?\n            <a href=\"https://ui.wpmoo.org/examples/auth/sign-up/\">Sign up</a>\n          </p>\n    </div>\n  </div>\n        \n    <a class=\"btn btn-ghost btn-sm moo-auth-page__back\" role=\"button\" href=\"https://ui.wpmoo.org/examples/\">\n<svg\n  data-icon=\"inline-start\"\n  data-lucide=\"arrow-left\"\n  viewBox=\"0 0 24 24\"\n  fill=\"none\"\n  stroke=\"currentColor\"\n  stroke-width=\"2\"\n  stroke-linecap=\"round\"\n  stroke-linejoin=\"round\"\n  aria-hidden=\"true\"\n>\n  <path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"/>\n</svg>      Back to Examples\n    </a>\n\n      </div>\n    </main>\n\n    <footer class=\"moo-auth-page__footer text-body-secondary small\">\n      <p class=\"mb-0\">\n        Demo only \u2014 this form does not submit anywhere or store any data.\n        Built with the\n          <a\n    href=\"#!\"\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"btn btn-link p-0 align-baseline\"\n    data-bs-toggle=\"popover\"\n    data-bs-trigger=\"focus\"\ndata-bs-container=\"body\"    data-bs-placement=\"top\"\n    data-bs-content=\"<a href='https://ui.wpmoo.org/components/card/' target='_blank' rel='noopener noreferrer' class='moo-examples-footer__preview'><img src='https://ui.wpmoo.org/assets/images/components/card.webp' alt='' class='moo-catalog__showcase-image w-100 mw-100 mh-100 object-fit-contain' loading='lazy'></a>\n      <strong class='d-block mb-1'>Card</strong>\n      Display a structured surface with a header, body, and optional footer.\n      <a href='https://ui.wpmoo.org/components/card/' target='_blank' rel='noopener noreferrer' class='d-block mt-1'>Learn more</a>\"\ndata-bs-html=\"true\"  >Card</a>,\n          <a\n    href=\"#!\"\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"btn btn-link p-0 align-baseline\"\n    data-bs-toggle=\"popover\"\n    data-bs-trigger=\"focus\"\ndata-bs-container=\"body\"    data-bs-placement=\"top\"\n    data-bs-content=\"<a href='https://ui.wpmoo.org/components/form/' target='_blank' rel='noopener noreferrer' class='moo-examples-footer__preview'><img src='https://ui.wpmoo.org/assets/images/components/form.webp' alt='' class='moo-catalog__showcase-image w-100 mw-100 mh-100 object-fit-contain' loading='lazy'></a>\n      <strong class='d-block mb-1'>Form</strong>\n      Build complete Bootstrap forms from native form and fieldset markup, visible labels, descriptions, validation feedback, and documented Field components.\n      <a href='https://ui.wpmoo.org/components/form/' target='_blank' rel='noopener noreferrer' class='d-block mt-1'>Learn more</a>\"\ndata-bs-html=\"true\"  >Form</a>,\n          <a\n    href=\"#!\"\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"btn btn-link p-0 align-baseline\"\n    data-bs-toggle=\"popover\"\n    data-bs-trigger=\"focus\"\ndata-bs-container=\"body\"    data-bs-placement=\"top\"\n    data-bs-content=\"<a href='https://ui.wpmoo.org/components/field/' target='_blank' rel='noopener noreferrer' class='moo-examples-footer__preview'><img src='https://ui.wpmoo.org/assets/images/components/field.webp' alt='' class='moo-catalog__showcase-image w-100 mw-100 mh-100 object-fit-contain' loading='lazy'></a>\n      <strong class='d-block mb-1'>Field</strong>\n      Compose the ready Input, Textarea, Native Select, Checkbox, Radio Group, and Switch controls into accessible, label-first fields using Bootstrap-native validation and semantic grouping.\n      <a href='https://ui.wpmoo.org/components/field/' target='_blank' rel='noopener noreferrer' class='d-block mt-1'>Learn more</a>\"\ndata-bs-html=\"true\"  >Field</a>,\n          <a\n    href=\"#!\"\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"btn btn-link p-0 align-baseline\"\n    data-bs-toggle=\"popover\"\n    data-bs-trigger=\"focus\"\ndata-bs-container=\"body\"    data-bs-placement=\"top\"\n    data-bs-content=\"<a href='https://ui.wpmoo.org/components/input/' target='_blank' rel='noopener noreferrer' class='moo-examples-footer__preview'><img src='https://ui.wpmoo.org/assets/images/components/input.webp' alt='' class='moo-catalog__showcase-image w-100 mw-100 mh-100 object-fit-contain' loading='lazy'></a>\n      <strong class='d-block mb-1'>Input</strong>\n      A native input primitive with Bootstrap form semantics for labeled, helper-aware, and validated fields.\n      <a href='https://ui.wpmoo.org/components/input/' target='_blank' rel='noopener noreferrer' class='d-block mt-1'>Learn more</a>\"\ndata-bs-html=\"true\"  >Input</a>,\n          <a\n    href=\"#!\"\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"btn btn-link p-0 align-baseline\"\n    data-bs-toggle=\"popover\"\n    data-bs-trigger=\"focus\"\ndata-bs-container=\"body\"    data-bs-placement=\"top\"\n    data-bs-content=\"<a href='https://ui.wpmoo.org/components/checkbox/' target='_blank' rel='noopener noreferrer' class='moo-examples-footer__preview'><img src='https://ui.wpmoo.org/assets/images/components/checkbox.webp' alt='' class='moo-catalog__showcase-image w-100 mw-100 mh-100 object-fit-contain' loading='lazy'></a>\n      <strong class='d-block mb-1'>Checkbox</strong>\n      Toggle a single option using Bootstrap&#39;s native checkbox contract.\n      <a href='https://ui.wpmoo.org/components/checkbox/' target='_blank' rel='noopener noreferrer' class='d-block mt-1'>Learn more</a>\"\ndata-bs-html=\"true\"  >Checkbox</a>, and\n          <a\n    href=\"#!\"\n    role=\"button\"\n    tabindex=\"0\"\n    class=\"btn btn-link p-0 align-baseline\"\n    data-bs-toggle=\"popover\"\n    data-bs-trigger=\"focus\"\ndata-bs-container=\"body\"    data-bs-placement=\"top\"\n    data-bs-content=\"<a href='https://ui.wpmoo.org/components/button/' target='_blank' rel='noopener noreferrer' class='moo-examples-footer__preview'><img src='https://ui.wpmoo.org/assets/images/components/button.webp' alt='' class='moo-catalog__showcase-image w-100 mw-100 mh-100 object-fit-contain' loading='lazy'></a>\n      <strong class='d-block mb-1'>Button</strong>\n      Use Bootstrap button styles for reliable production actions: publish, review, and move work forward.\n      <a href='https://ui.wpmoo.org/components/button/' target='_blank' rel='noopener noreferrer' class='d-block mt-1'>Learn more</a>\"\ndata-bs-html=\"true\"  >Button</a>\n        components.\n      </p>\n      \n    </footer>\n  </div>\n</div>", "html_pre_processor": "none", "css": ".moo-auth-page {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n}\n\n.moo-auth-page__content {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  justify-content: center;\n  padding: 1.5rem;\n  background: var(--bs-tertiary-bg);\n}\n\n.moo-auth-page__inner {\n  display: grid;\n  gap: 1.5rem;\n  width: 100%;\n  max-width: 24rem;\n}\n\n.moo-auth-page__brand {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  font-weight: 600;\n  color: var(--bs-body-color);\n  text-decoration: none;\n}\n\n.moo-auth-page__footnote {\n  text-align: center;\n}\n\n.moo-auth-page__back {\n  justify-self: start;\n}\n\n.moo-auth-page__footer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  padding: 0.75rem 1.5rem;\n  background: var(--bs-body-bg);\n  border-top: var(--bs-border-width) solid var(--bs-border-color);\n}\n\n.moo-auth-page__footer > p {\n  text-align: left;\n}\n\n@media (max-width: 576px) {\n  .moo-auth-page__footer {\n    flex-direction: column;\n    align-items: stretch;\n    text-align: center;\n  }\n\n  .moo-auth-page__footer > p {\n    text-align: center;\n  }\n}", "css_pre_processor": "none", "css_starter": "neither", "css_external": "https://unpkg.com/@wpmoo/ui@1.3.0/dist/assets/css/moo-ui.css;https://ui.wpmoo.org/assets/css/codepen-demo.css", "js": "", "js_pre_processor": "none", "js_external": "https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/js/bootstrap.bundle.min.js;https://ui.wpmoo.org/assets/js/codepen-demo.js", "tags": ["moo-ui", "bootstrap", "css"], "editors": "110", "js_module": false}