Input

National Insurance number

HTML#

<div class="govuk-form-group lbh-form-group">
  <label class="govuk-label lbh-label" for="input-example">
    National Insurance number
  </label>
  <input
    class="govuk-input lbh-input"
    id="input-example"
    name="test-name"
    type="text"
  />
</div>

With hint text#

National insurance numberIt’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.

HTML#

<div class="govuk-form-group lbh-form-group">
  <label class="govuk-label lbh-label" for="input-with-hint-text">
    National insurance number
  </label>
  <span id="input-with-hint-text-hint" class="govuk-hint lbh-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For
    example, ‘QQ 12 34 56 C’.
  </span>
  <input
    class="govuk-input lbh-input"
    id="input-with-hint-text"
    name="test-name-2"
    type="text"
    aria-describedby="input-with-hint-text-hint"
  />
</div>

With error message#

National Insurance numberIt’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’. Error message goes here

HTML#

<div class="govuk-form-group govuk-form-group--error lbh-form-group">
  <label class="govuk-label lbh-label" for="input-with-error-message">
    National Insurance number
  </label>
  <span id="input-with-error-message-hint" class="govuk-hint lbh-hint">
    It’s on your National Insurance card, benefit letter, payslip or P60. For
    example, ‘QQ 12 34 56 C’.
  </span>
  <span
    id="input-with-error-message-error"
    class="govuk-error-message lbh-error-message"
  >
    <span class="govuk-visually-hidden">Error:</span> Error message goes here
  </span>
  <input
    class="govuk-input lbh-input govuk-input--error"
    id="input-with-error-message"
    name="test-name-3"
    type="text"
    aria-describedby="input-with-error-message-hint input-with-error-message-error"
  />
</div>