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
Checkboxes

Like radio buttons, check boxes are used in groups. Selecting a checkbox is not mutually exclusive, and multiple checkboxes can be selected.

.m-toggle-checkbox-group
  .a-toggle-checkbox.controlgroup.settings_email_new_follower
    %label.a-toggle-checkbox__label{:for => "email_preferences_new_follower"}
      %span.a-toggle-checkbox__label-text
        %input{:name => "email_preferences[new_follower]", :type => "hidden", :value => "0"}/
        %input#email_preferences_new_follower.input.input-wide.is-visually-hidden{:checked => "checked", :name => "email_preferences[new_follower]", :type => "checkbox", :value => "1"}/
        %span Email me when I have a new follower.
      %span.a-checkbox.is-on
  .a-toggle-checkbox.controlgroup.settings_email_run_notification
    %label.a-toggle-checkbox__label{:for => "email_preferences_run_notification"}
      %span.a-toggle-checkbox__label-text
        %input{:name => "email_preferences[run_notification]", :type => "hidden", :value => "0"}/
        %input#email_preferences_run_notification.input.input-wide.is-visually-hidden{:checked => "checked", :name => "email_preferences[run_notification]", :type => "checkbox", :value => "1"}/
        %span Email me notifications from my courses.
      %span.a-checkbox.is-on
  .a-toggle-checkbox.controlgroup.settings_email_comment_reply
    %label.a-toggle-checkbox__label{:for => "email_preferences_comment_reply"}
      %span.a-toggle-checkbox__label-text
        %input{:name => "email_preferences[comment_reply]", :type => "hidden", :value => "0"}/
        %input#email_preferences_comment_reply.input.input-wide.is-visually-hidden{:checked => "checked", :name => "email_preferences[comment_reply]", :type => "checkbox", :value => "1"}/
        %span Email me when someone replies to my comments.
      %span.a-checkbox.is-on