Skip to main content

Fieldset

Information: Documentation incomplete

This component still requires documentation.

Use the fieldset component to group related form elements.

Examples

Default

Open example in a new window
View HTML 
<fieldset class="uhb-c-fieldset">
  <legend class="uhb-c-fieldset__legend">
    <h1 class="nhsuk-fieldset__heading">
      What is your address?
    </h1>
  </legend>

  <div class="uhb-c-form-group">
    <label class="uhb-c-label" for="address-line-1">
      Building and street
    </label>
    <input class="uhb-c-input" id="address-line-1" name="address-line-1" type="text">
  </div>

  <div class="uhb-c-form-group">
    <label class="uhb-c-label" for="address-town">
      Town or city
    </label>
    <input class="uhb-c-input" id="address-town" name="address-town" type="text">
  </div>

  <div class="uhb-c-form-group">
    <label class="uhb-c-label" for="address-county">
      County
    </label>
    <input class="uhb-c-input" id="address-county" name="address-county" type="text">
  </div>

  <div class="uhb-c-form-group">
    <label class="uhb-c-label" for="address-postcode">
      Postcode
    </label>
    <input class="uhb-c-input" id="address-postcode" name="address-postcode" type="text">
  </div>

</fieldset>