Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Radio Buttons

Like checkboxes, radio buttons are used in groups. Their default state is unchecked. Selecting radio buttons is mutually exclusive – if one of the radio buttons in the group is checked the other ones are automatically unchecked.

The radio buttons for quizzes have thier own styles and are reserved for quizzes

Here’s the default appearance of radio buttons:

%form
  .m-radio-button
    %label.a-radio__label.control-label
      %input.a-radio__input{type: "radio", name: 'radio_buttons', value: 'radio_button_1'}
      %span.a-radio__label-text The first Radio Button
      %span.a-radio__button
  .m-radio-button
    %label.a-radio__label.control-label
      %input.a-radio__input{type: "radio", name: 'radio_buttons', value: 'radio_button_2'}
      %span.a-radio__label-text
        Visible when the run starts.
        %span.a-radio__label-hint A second line / Hint
      %span.a-radio__button
  .m-radio-button
    %label.a-radio__label.control-label
      %input.a-radio__input{type: "radio", name: 'radio_buttons', value: 'radio_button_3'}
      %span.a-radio__label-text Visible when the run starts.
      %span.a-radio__button

Radio buttons in quizzes appear like this:

%form
  .quizitem_option
    %label
      %input#multiple_choice_response_answer_ids_174447{:multiple => "multiple", :name => "multiple_choice_response[answer_ids][]", :type => "radio", :value => "174447"}
      %span.quizitem_optiontext
        Complete our maths homework
  .quizitem_option
    %label
      %input#multiple_choice_response_answer_ids_174448{:multiple => "multiple", :name => "multiple_choice_response[answer_ids][]", :type => "radio", :value => "174448"}
      %span.quizitem_optiontext
        Test the validity of claims of science
  .quizitem_option
    %label
      %input#multiple_choice_response_answer_ids_174449{:multiple => "multiple", :name => "multiple_choice_response[answer_ids][]", :type => "radio", :value => "174449"}
      %span.quizitem_optiontext
        Make sense of the natural world
  .quizitem_option
    %label
      %input#multiple_choice_response_answer_ids_174450{:multiple => "multiple", :name => "multiple_choice_response[answer_ids][]", :type => "radio", :value => "174450"}
      %span.quizitem_optiontext
        Interpret how government budget cuts affect our lives