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

Radio buttons

Use the radios component when users can only select one option from a list.
GDS guidelines on using this component (opens in a new window)

Are you based in the UK? [legend]

This helps us to send you relevant information based on your locality. [hint text]

Yes

HTML Code ↕

                    
                      <div class="govuk-form-group">
<fieldset class="govuk-fieldset" aria-describedby="changed-name-hint">
  <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
    <h1 class="govuk-fieldset__heading">
      Are you based in the UK? [legend]
    </h1>
  </legend>
  <div id="changed-name-hint" class="govuk-hint">
    This helps us to send you relevant information based on your locality. [hint text]
  </div>
  <div class="govuk-radios" data-module="govuk-radios">
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="changed-name" name="changed-name" type="radio" value="yes">
      <label class="govuk-label govuk-radios__label" for="changed-name">
        Yes
      </label>
    </div>
    <div class="govuk-radios__item">
      <input class="govuk-radios__input" id="changed-name-2" name="changed-name" type="radio" value="no">
      <label class="govuk-label govuk-radios__label" for="changed-name-2">
        No
      </label>
    </div>
  </div>
</fieldset>
</div>