Fieldsets and legends

Do

  • Use fieldsets to group related information, particulary on longer forms. The first element inside a fieldset must be a legend element which describes the group, for example personal details, account information and contact details.
  • Radio and checkboxes should also be grouped together using a "fieldset" element.

Don't

  • You should not use the "fieldset" and "legend" when you have a single form field that asks for a single piece of information.

Example

What services would you like to subscribe to?

Code

<div class="form-group lcc-form-group"> <fieldset> <legend> What services would you like to subscribe to? </legend> <div class="form-check multiple-choice"> <input class="form-check-input" type="checkbox" value="binsRecycling" id="binsRecycling"> <label class="form-check-label" for="binsRecycling"> Bins and recycling </label> </div> <div class="form-check multiple-choice"> <input class="form-check-input" type="checkbox" value="planningBuildingControl" id="planningBuildingControl"> <label class="form-check-label" for="planningBuildingControl"> Planning and building control </label> </div> <div class="form-check multiple-choice"> <input class="form-check-input" type="checkbox" value="councilTax" id="councilTax"> <label class="form-check-label" for="councilTax"> Council tax </label> </div> <div class="form-check multiple-choice"> <input class="form-check-input" type="checkbox" value="roadsParking" id="roadsParking"> <label class="form-check-label" for="roadsParking"> Roads and parking </label> </div> <div class="form-check multiple-choice"> <input class="form-check-input" type="checkbox" value="leisure" id="leisure"> <label class="form-check-label" for="leisure"> Leisure </label> </div> </fieldset> </div>