Radio group

On this page

A radio allows a user to select only one option from a group of exclusive choices and it is usually displayed in a radio group.

Do not use a radio group if the user:

  • should be able to select one or more choices from a list of options (use a checkbox group for this)
  • there is only one checkbox in the list of options, for example agreeing to terms and conditions (use checkbox for this)

Examples

The default behaviour is stacked radios, use this if there are more than 2 options or the option text is long.

Open example in a new tab
Example radio group (optional)
<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content">
      <fieldset class="cads-form-group cads-form-group--radio"><legend class="cads-form-field__label">Example radio group <span class="cads-form-field__optional">(optional)</span></legend><input type="hidden" name="forms_radios[radios]" value="" />
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios-input" type="radio" value="option_1" name="forms_radios[radios]" /><label class="cads-form-group__label" for="forms_radios_radios-input">Option 1</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios-1" type="radio" value="option_2" name="forms_radios[radios]" /><label class="cads-form-group__label" for="forms_radios_radios-1">Option 2</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios-2" type="radio" value="option_3" name="forms_radios[radios]" /><label class="cads-form-group__label" for="forms_radios_radios-2">Option 3</label></div>
      </fieldset>
    </div>
  </div>
</form>

<% @model = Forms::Radios.valid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :radios,
    collection: @model.options,
    text_method: :name,
    value_method: :id
  ) %>
<% end %>

Inline

You can use inline radios if there are only 2 options and the text is short.

Open example in a new tab
Example radio group (inline layout) (optional)
<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content">
      <fieldset class="cads-form-group cads-form-group--radio cads-radio-group--inline"><legend class="cads-form-field__label">Example radio group (inline layout) <span class="cads-form-field__optional">(optional)</span></legend><input type="hidden" name="forms_radios[radios_inline]" value="" />
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_inline-input" type="radio" value="option_1" name="forms_radios[radios_inline]" /><label class="cads-form-group__label" for="forms_radios_radios_inline-input">Option 1</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_inline-1" type="radio" value="option_2" name="forms_radios[radios_inline]" /><label class="cads-form-group__label" for="forms_radios_radios_inline-1">Option 2</label></div>
      </fieldset>
    </div>
  </div>
</form>

<% @model = Forms::Radios.valid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :radios_inline,
    collection: @model.options.take(2),
    text_method: :name,
    value_method: :id,
    layout: :inline
  ) %>
<% end %>

Small

Open example in a new tab
Example radio group (small size) (optional)
<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content">
      <fieldset class="cads-form-group cads-form-group--radio cads-radio-group--small"><legend class="cads-form-field__label">Example radio group (small size) <span class="cads-form-field__optional">(optional)</span></legend><input type="hidden" name="forms_radios[radios_small]" value="" />
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_small-input" type="radio" value="option_1" name="forms_radios[radios_small]" /><label class="cads-form-group__label" for="forms_radios_radios_small-input">Option 1</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_small-1" type="radio" value="option_2" name="forms_radios[radios_small]" /><label class="cads-form-group__label" for="forms_radios_radios_small-1">Option 2</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_small-2" type="radio" value="option_3" name="forms_radios[radios_small]" /><label class="cads-form-group__label" for="forms_radios_radios_small-2">Option 3</label></div>
      </fieldset>
    </div>
  </div>
</form>

<% @model = Forms::Radios.valid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :radios_small,
    collection: @model.options,
    text_method: :name,
    value_method: :id,
    size: :small
  ) %>
<% end %>

Use standard radios in almost all cases. Use small radios to make them less visually prominent or on pages with lots of dense information. Small radios can be stacked or inline.

With hint

Use hint text for help that’s relevant to the majority of users, based on the needs of your service.

Open example in a new tab
Example radio group with hint (optional)

Example hint text

<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content">
      <fieldset class="cads-form-group cads-form-group--radio" aria-describedby="forms_radios_radios_hint-hint"><legend class="cads-form-field__label">Example radio group with hint <span class="cads-form-field__optional">(optional)</span></legend>
        <p class="cads-form-field__hint" id="forms_radios_radios_hint-hint">Example hint text</p>
        <input type="hidden" name="forms_radios[radios_hint]" value="" />
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_hint-input" type="radio" value="option_1" name="forms_radios[radios_hint]" /><label class="cads-form-group__label" for="forms_radios_radios_hint-input">Option 1</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_hint-1" type="radio" value="option_2" name="forms_radios[radios_hint]" /><label class="cads-form-group__label" for="forms_radios_radios_hint-1">Option 2</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_hint-2" type="radio" value="option_3" name="forms_radios[radios_hint]" /><label class="cads-form-group__label" for="forms_radios_radios_hint-2">Option 3</label></div>
      </fieldset>
    </div>
  </div>
</form>

<% @model = Forms::Radios.valid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :radios_hint,
    collection: @model.options,
    text_method: :name,
    value_method: :id,
    hint: "Example hint text"
  ) %>
<% end %>

With error message

Error messages are used to highlight where users need to change information. They’re used together with an error summary.

Open example in a new tab
Example radio group (optional)

Select an option

<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field cads-form-field--has-error">
    <div class="cads-form-field__error-marker"></div>
    <div class="cads-form-field__content">
      <fieldset class="cads-form-group cads-form-group--radio" aria-describedby="forms_radios_radios_required-error"><legend class="cads-form-field__label">Example radio group <span class="cads-form-field__optional">(optional)</span></legend>
        <p class="cads-form-field__error-message" id="forms_radios_radios_required-error">Select an option</p>
        <input type="hidden" name="forms_radios[radios_required]" value="" />
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_required-input" type="radio" value="option_1" name="forms_radios[radios_required]" /><label class="cads-form-group__label" for="forms_radios_radios_required-input">Option 1</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_required-1" type="radio" value="option_2" name="forms_radios[radios_required]" /><label class="cads-form-group__label" for="forms_radios_radios_required-1">Option 2</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_required-2" type="radio" value="option_3" name="forms_radios[radios_required]" /><label class="cads-form-group__label" for="forms_radios_radios_required-2">Option 3</label></div>
      </fieldset>
    </div>
  </div>
</form>

<% @model = Forms::Radios.invalid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :radios_required,
    collection: @model.options,
    text_method: :name,
    value_method: :id
  ) %>
<% end %>

Page heading

Used for one question per page forms. Using similar approach to the one described in gov.uk - Making labels and legends headings.

Open example in a new tab

Example radio group with page heading

<form action="/" accept-charset="UTF-8" method="post">
  <div class="cads-form-field">
    <div class="cads-form-field__content">
      <fieldset class="cads-form-group cads-form-group--radio"><legend class="cads-form-field__label">
          <h1 class="cads-page-title">Example radio group with page heading</h1>
        </legend><input type="hidden" name="forms_radios[radios_page_heading]" value="" />
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_page_heading-input" type="radio" value="option_1" name="forms_radios[radios_page_heading]" /><label class="cads-form-group__label" for="forms_radios_radios_page_heading-input">Option 1</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_page_heading-1" type="radio" value="option_2" name="forms_radios[radios_page_heading]" /><label class="cads-form-group__label" for="forms_radios_radios_page_heading-1">Option 2</label></div>
        <div class="cads-form-group__item"><input class="cads-form-group__input" id="forms_radios_radios_page_heading-2" type="radio" value="option_3" name="forms_radios[radios_page_heading]" /><label class="cads-form-group__label" for="forms_radios_radios_page_heading-2">Option 3</label></div>
      </fieldset>
    </div>
  </div>
</form>

<% @model = Forms::Radios.valid_example %>
<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :radios_page_heading,
    collection: @model.options,
    text_method: :name,
    value_method: :id,
    page_heading: true
  ) %>
<% end %>

Implementation

You must always have a label associated with the input element.

The components we provide use wrap radio groups in a fieldset. In this context the ‘label’ is typically the fieldset legend, as every radio option is a label + input in its own right.

Using with Rails

When using with Rails we recommend using the form builder method provided by CitizensAdviceComponents::FormBuilder.

cads_collection_radio_buttons(attribute, collection:, value_method:, text_method:, options = {})

The method works similarly to the default collection_radio_buttons helper.

<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :example,
    collection: [
      ["option_1", "Option 1"],
      ["option_2", "Option 2"],
      ["option_3", "Option 3"],
      ["option_4", "Option 4"],
      ["option_5", "Option 5"],
    ],
    text_method: :first,
    value_method: :last,
    hint: "Example hint text",
    required: true
  ) %>
<% end %>

But this can also work with any collection:

<%= form_with model: @model, url: "/" do |form| %>
  <%= form.cads_collection_radio_buttons(
    :example,
    collection: Locations.all,
    text_method: :id,
    value_method: :name,
    hint: "Example hint text"
  ) %>
<% end %>

The :value_method and :text_method parameters are methods to be called on each member of collection. The return values are used as the value attribute and contents of each <option> tag, respectively.

The method accepts an options hash with the following optional parameters:

  • :label - The text for the label associated with the input. Defaults to using translations.
  • :hint - Hint text for the input
  • :required - Boolean indicating the field is optional (i.e. not required)
  • :size - The size of the radio buttons. One of :small, :regular (default: :regular)
  • :layout - The layout of the radio buttons. One of :inline, :list (default: :list)
  • :page_heading - Wraps the <legend> in a <h1>

View component version

We also provide an older view component version of the component

<%= render CitizensAdviceComponents::RadioGroup.new(
  legend: "Example radio group",
  name: "radio-buttons",
  options: { size: :small }
) do |c|
  c.with_inputs([
    { label: "Option 1", value: "1", id: "custom-id" },
    { label: "Option 2", value: "2" }
  ])
end %>
Component arguments
Argument Description
Argument name Description Required, field name
Argument id Description Optional, allows customising the id. By default the id is autogenerated based on the name
Argument label Description Required, the text for the label associated with the input
Argument options Description Optional, a hash with one or more of the following values:
Argument options[:hint] Description → Optional, hint text for the input
Argument options[:error_message] Description → Optional, an error message for the input
Argument options[:optional] Description → Optional, boolean indicating the field is optional (ie not required)
Argument options[:size] Description → Optional, the size of the radio buttons. One of nil, :small, :regular
Argument options[:layout] Description → Optional, the layout of the radio buttons. One of nil, :inline, :list
Argument options[:page_heading] Description → Optional, boolean indicating the field label is a page heading