Forms

Personal details

<form class="occlss-form" novalidate>
  <fieldset>
    <legend class="occlss-form__group-title occlss-form__group-title--large">Personal details of the applicant</legend>
    <span class="occlss-form__desc-text">There are the details of the person who requires the Blue Badge.</span>
    <div class="occlss-form-cntrls  occlss-form-cntrls--size-450">
      <label class="occlss-form-cntrls__label " for="first-name">First name</label>
      <input class="occlss-form-cntrls__input " id="first-name" name="first-name" type="text">
    </div>
    <div class="occlss-form-cntrls  occlss-form-cntrls--size-450">
      <label class="occlss-form-cntrls__label " for="last-name">Last name</label>
      <input class="occlss-form-cntrls__input " id="last-name" name="last-name" type="text">
    </div>
    <fieldset>
      <legend class="occlss-form__group-title occlss-u-bspace-none">Date of birth</legend>
      <span class="occlss-form__hint-text occlss-u-bspace-sm" id="dobHint">For example: 14 08 1972</span>
      <div class="occlss-form-cntrls occlss-form-cntrls--day">
        <label class="occlss-form-cntrls__label occlss-form-cntrls__label--small" for="date_of_birth_2">Day</label>
        <input class="occlss-form-cntrls__input" aria-describedby="dobHint" id="date_of_birth_2" name="date_of_birth_2" pattern="0?[1-9]|1[0-9]|2[0-9]|3[01]" type="number" min="1" max="31" value="">
      </div>
      <div class="occlss-form-cntrls occlss-form-cntrls--month">
        <label class="occlss-form-cntrls__label occlss-form-cntrls__label--small" for="date_of_birth_1">Month</label>
        <input class="occlss-form-cntrls__input" aria-describedby="dobHint" id="date_of_birth_1" name="date_of_birth_1" pattern="0?[1-9]|1[012]" type="number" min="1" max="12" value="">
      </div>
      <div class="occlss-form-cntrls occlss-form-cntrls--year">
        <label class="occlss-form-cntrls__label occlss-form-cntrls__label--small" for="date_of_birth_3">Year</label>
        <input class="occlss-form-cntrls__input" aria-describedby="dobHint" id="date_of_birth_3" name="date_of_birth_3" pattern="[0-9]{4}" type="number" min="1900" max="2000" value="">
      </div>
    </fieldset>
  </fieldset>
  <nav class="occlss-form__controls occlss-u-bspace-large" role="navigation">
    <ul class="occlss-form__listitems">
      <li class="occlss-form__controls-list-item occlss-form__controls-list-item--spaced">
        <button type="submit" class="occlss-button occlss-button--neutral">
          Back
        </button>
      </li>
      <li class="occlss-form__controls-list-item">
        <button type="submit" class="occlss-button occlss-button--primary">
          Continue
        </button>
      </li>
    </ul>
  </nav>
</form>

Changelog

1.0.0

  • Component Added