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

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.

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