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.

In some cases changing the state of the checkbox should submit the surrounding form (implemented using `$(this).trigger('submit.rails')` ). To enable immediate submit on change, add the class `.js-immediate-submit` to the `.a-toggle-checkbox` element.

To manipulate the value of checkboxes on the change event and toggle between 1 and 0 (which is the default for a single Rails checkbox), add the class .js-manipulate-value.

.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