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.

Currently all checkboxes have auto-submit behaviour attached to them, which means the form is submitted when the checkbox is ticked. To prevent the auto-submit you can use js-disable-submit class.

.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