Skip to main content

Work in progress

This page is a design preview. It may not contain the latest guidance and may not behave as expected.

Current guidance can always be found at design-system.dwp.gov.uk.

Written formats

HTML

<form class="form">
  <div class="govuk-form-group">
    <fieldset class="govuk-fieldset" aria-describedby="written-format-hint">
      <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
        <h1 class="govuk-fieldset__heading">
          How should we write to you?
        </h1>
      </legend>
      <div id="written-format-hint" class="govuk-hint">
        <p class='govuk-hint'>Select the best option for you.
        <p>
      </div>
      <div class="govuk-radios" data-module="govuk-radios">
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format" name="written-format" type="radio" value="Standard letter (12-point Arial text on white paper)">
          <label class="govuk-label govuk-radios__label" for="written-format">
            Standard letter (12-point Arial text on white paper)
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format-2" name="written-format" type="radio" value="Large print">
          <label class="govuk-label govuk-radios__label" for="written-format-2">
            Large print
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format-3" name="written-format" type="radio" value="Letter with changes to font, paper colour, spacing or print size">
          <label class="govuk-label govuk-radios__label" for="written-format-3">
            Letter with changes to font, paper colour, spacing or print size
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format-4" name="written-format" type="radio" value="Audio">
          <label class="govuk-label govuk-radios__label" for="written-format-4">
            Audio
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format-5" name="written-format" type="radio" value="Braille">
          <label class="govuk-label govuk-radios__label" for="written-format-5">
            Braille
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format-6" name="written-format" type="radio" value="British Sign Language video">
          <label class="govuk-label govuk-radios__label" for="written-format-6">
            British Sign Language video
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format-7" name="written-format" type="radio" value="Microsoft Word document">
          <label class="govuk-label govuk-radios__label" for="written-format-7">
            Microsoft Word document
          </label>
        </div>
        <div class="govuk-radios__item">
          <input class="govuk-radios__input" id="written-format-8" name="written-format" type="radio" value="PDF with accessible text">
          <label class="govuk-label govuk-radios__label" for="written-format-8">
            PDF with accessible text
          </label>
        </div>
      </div>
    </fieldset>
  </div>
  <button type="submit" class="govuk-button" data-module="govuk-button">
    Continue
  </button>
</form>