DOTD Component Library

Forms: Default 

<form class="c-form u-spacing" action="/">
      <div class="o-input o-form__item">
          <label for="email">
              Username
          </label>
          <input id="email" name="email" type="email" placeholder="Enter email address" />
      </div>
      <div class="o-input o-form__item">
          <label for="password">
              Password
          </label>
          <input id="password" name="password" type="password" placeholder="Email password" />
      </div>
      <div class="c-form__button-group">
          <button class="o-button" type="submit">
              <span class="o-button__label">
                  Login
              </span>
          </button>
          <a class="o-link o-link--secondary u-text-decoration--underline" href="/" target="_self">
              <span class="o-link__label">
                  Sign up
              </span>
          </a>
      </div>
  </form>
 
{% set base_class = form.base_class|default('c-form') %}
{% if form.fields or form.buttons %}
  <form class="{{ bem(base_class, form.element, form.modifiers, form.extra) }}"{{ attributes(form.attributes) }}>
    {% for item in form.fields %}
      {% include "@" ~ item.type with item.value %}
    {% endfor %}
    {% if form.buttons %}
      <div class="{{ bem(base_class, 'button-group') }}">
        {% for item in form.buttons %}
          {% include "@" ~ item.type with item.value %}
        {% endfor %}
      </div>
    {% endif %}
  </form>
{% endif %}
 
{
  "form": {
    "extra": "u-spacing",
    "attributes": {
      "action": "/"
    },
    "fields": [
      {
        "type": "input",
        "value": {
          "input": {
            "type": "email",
            "name": "email",
            "label": "Username",
            "attributes": {
              "placeholder": "Enter email address"
            }
          }
        }
      },
      {
        "type": "input",
        "value": {
          "input": {
            "type": "password",
            "name": "password",
            "label": "Password",
            "attributes": {
              "placeholder": "Email password"
            }
          }
        }
      }
    ],
    "buttons": [
      {
        "type": "button",
        "value": {
          "button": {
            "text": "Login",
            "attributes": {
              "type": "submit"
            }
          }
        }
      },
      {
        "type": "link",
        "value": {
          "link": {
            "url": "/",
            "text": "Sign up",
            "modifiers": "secondary",
            "extra": "u-text-decoration--underline"
          }
        }
      }
    ]
  }
}
  • Content: 
    /* ------------------------------------*\
  $FORMS
\*------------------------------------ */

.c-form {
  &__button-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--dotd-space);
  }
}

.c-form--inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;

  & > * + * {
    margin-top: 0;
  }

  .o-input {
    width: 100%;
  }

  .o-button {
    width: var(--dotd-layout-height-input);
    height: var(--dotd-layout-height-input);

    &--clear {
      display: none;
    }
  }

  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }

  .c-form__button-group {
    border: 0;
    border-top-right-radius: var(--dotd-border-radius-input);
    border-bottom-right-radius: var(--dotd-border-radius-input);
    position: absolute;
    top: 0;
    right: 0;
    gap: 0;
    overflow: hidden;
  }
}

.c-form--newsletter {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 320px;

  input[type="email"] {
    padding-right: calc(#{var(--dotd-icon-xl)});
    border-radius: var(--dotd-border-radius-input);
  }

  button {
    position: absolute;
    top: 8px;
    right: 8px;
    text-indent: 9999px;
    overflow: hidden;
    width: var(--dotd-icon-lg);
    height: var(--dotd-icon-lg);
    padding: 0;
    background-color: var(--dotd-color-background-primary-default);
    border-radius: var(--dotd-border-radius-input);

    &:hover,
    &:focus {
      transform: none;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      display: block;
      width: 100%;
      height: 100%;
      pointer-events: none;
      mask-repeat: no-repeat;
      mask-position: center center;
      mask-size: var(--dotd-icon) auto;
      mask-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDE1IDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjU5MDk0IDAuMjY1MjA3QzkuOTk2NzYgLTAuMTA5Mzk5IDEwLjYyOTQgLTAuMDg0MDk2MiAxMS4wMDQgMC4zMjE3MjJMMTQuMjM0OCAzLjgyMTY4QzE0LjU4ODQgNC4yMDQ3NCAxNC41ODg0IDQuNzk1MTggMTQuMjM0OCA1LjE3ODI0TDExLjAwNCA4LjY3ODI4QzEwLjYyOTQgOS4wODQxMSA5Ljk5Njc3IDkuMTA5NDEgOS41OTA5NSA4LjczNDgxQzkuMTg1MTMgOC4zNjAyMSA5LjE1OTgyIDcuNzI3NTUgOS41MzQ0MiA3LjMyMTczTDExLjIxNiA1LjQ5OTk3TDEuNSA1LjQ5OTk3QzAuOTQ3NzE0IDUuNDk5OTcgMC40OTk5OTkgNS4wNTIyNSAwLjQ5OTk5OSA0LjQ5OTk3QzAuNDk5OTk5IDMuOTQ3NjggMC45NDc3MTQgMy40OTk5NyAxLjUgMy40OTk5N0wxMS4yMTYgMy40OTk5N0w5LjUzNDQzIDEuNjc4MjlDOS4xNTk4MiAxLjI3MjQ3IDkuMTg1MTMgMC42Mzk4MTMgOS41OTA5NCAwLjI2NTIwN1oiIGZpbGw9IndoaXRlIi8+PC9zdmc+Cg==");
      background-color: var(--dotd-color-content-primary-strong);
    }
  }

  br {
    display: none;
  }
}
  • URL: /components/raw/form/_form.scss
  • Filesystem Path: components/02-molecules/form/_form.scss
  • Size: 2.8 KB

No notes defined.