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.

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.

    %label.a-toggle-checkbox__label{:for => "email_preferences_new_follower"}
        %input{:name => "email_preferences[new_follower]", :type => "hidden", :value => "0"}/{: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"}/{: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"}/{:checked => "checked", :name => "email_preferences[comment_reply]", :type => "checkbox", :value => "1"}/
        %span Email me when someone replies to my comments.