The LB Redbridge design system.

- Reusability
- User centred design
- An overview
- An introduction
- A starter template
- Accordion
- Back link
- Breadcrumbs
- Button
- Character count
- Checkboxes
- Confirmation
- Date input
- Details
- Declarations
- Error message and summary
- File upload
- Footer
- Header
- Hyperlink
- Inset text
- Layouts
- Mapping
- Phase banner
- Phone numbers
- Print button
- Radio buttons
- Select
- Spacing
- Table ( responsive )
- Text input
- Textarea
- Typography
- Warning text
- Well
- Case examples

Checkboxes

Let users select one or more options.
GDS guidelines on using this component (opens in a new window)

What transport do you use? [legend]

Select all that apply [hint text]

Car

Bike

Bus

HTML Code ↕

                    
                      <div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="transport-hint">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">
      What transport do you use?
    </h1>
  </legend>
  <div id="transport-hint" class="govuk-hint">
    Select all that apply [hint text]
  </div>
  <div class="govuk-checkboxes" data-module="govuk-checkboxes">
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="transport" name="transport" type="checkbox" value="car">
      <label class="govuk-label govuk-checkboxes__label" for="transport">
        Car
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="transport-2" name="transport" type="checkbox" value="bike">
      <label class="govuk-label govuk-checkboxes__label" for="waste-2">
        Bike
      </label>
    </div>
    <div class="govuk-checkboxes__item">
      <input class="govuk-checkboxes__input" id="transport-3" name="transport" type="checkbox" value="bus">
      <label class="govuk-label govuk-checkboxes__label" for="waste-3">
        Bus
      </label>
    </div>
  </div>
</fieldset>
</div>