Date field group

To illustrate the styling of checked and hover states, .hover and .checked classes have been added to simulate these states. These classes are not required in production where the :hover and :checked pseudo-classes are used.

Date of birth

Day (DD)

Month (MM)

Year (YYYY)

HTML

    
<fieldset id="date" class="form__field date-field-group">
  <legend>Date of birth</legend>
  <div class="input-field input-field--text input-field--short">
    <label>Day (DD)
      <input id="date-day" name="date-field-day" type="number"    />
    </label>
  </div>
  <div class="input-field input-field--text input-field--short">
    <label>Month (MM)
      <input id="date-month" name="date-field-month" type="number"    />
    </label>
  </div>
  <div class="input-field input-field--text input-field--short">
    <label>Year (YYYY)
      <input id="date-year" name="date-field-year" type="number"    />
    </label>
  </div>
</fieldset>

SCSS

    .date-field-group {
  @include clearfix();
  position: relative;
  border: none;
  margin: 0 0 28px;
  padding: 0;

  legend {
    @include small-font();
    display: block;
    font-weight: bold;
    margin: 0 0 4px;
    padding: 0;
  }

  .input-field {
    display: inline-block;
    padding: 0 10px 0 0;
    margin-bottom: 0;

//     &:first-child { padding-left: 0 }
    &:last-child { padding-right: 0 }
  }

  input[name="date-field-date"] {
    // @include hide-visually;
  }

  form & label.error {
    // position:absolute;
    // top: 72px;
    width: 480px;
  }
}

Connect Dementia Research

Pattern Library

Date field group

HTML

SCSS