Created
December 7, 2011 15:42
-
-
Save bpainter/1443254 to your computer and use it in GitHub Desktop.
Basic HTML for radio & checkbox markup
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
%fieldset | |
%legend | |
%label{:for => "checkbox-group"} Group of Checkboxes | |
.fields.inline | |
.field.checkbox | |
%input{:type => "checkbox", :id => "checkbox-1", :name => "checkbox-group", :value => "", "aria-checked" => "false"} | |
%label{:for => "checkbox-1"} First Checkbox | |
.field.checkbox | |
%input{:type => "checkbox", :id => "checkbox-2", :name => "checkbox-group", :value => "", "aria-checked" => "true", "aria-labeledby" => "l-checkbox-2"} | |
%label{:for => "checkbox-2"} Second Checkbox | |
.field.checkbox | |
%input{:type => "checkbox", :id => "checkbox-3", :name => "checkbox-group", :value => "", "aria-checked" => "false", "aria-labeledby" => "l-checkbox-3"} | |
%label{:for => "checkbox-3"} Third Checkbox |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.item | |
.fields.vertical // .vertical, .inline, | |
%label{:for => "checkbox-group"} Group of Checkboxes | |
.field.checkbox | |
%input{:type => "checkbox", :id => "checkbox-1", :name => "checkbox-group", :value => "", "aria-checked" => "false"} | |
%label{:for => "checkbox-1"} First Checkbox | |
.field.checkbox | |
%input{:type => "checkbox", :id => "checkbox-2", :name => "checkbox-group", :value => "", "aria-checked" => "true", "aria-labeledby" => "l-checkbox-2"} | |
%label{:for => "checkbox-2"} Second Checkbox | |
.field.checkbox | |
%input{:type => "checkbox", :id => "checkbox-3", :name => "checkbox-group", :value => "", "aria-checked" => "false", "aria-labeledby" => "l-checkbox-3"} | |
%label{:for => "checkbox-3"} Third Checkbox |
I generally wrap my checkbox/radio inputs with the label and we’re working on a pull request for simple_form to allow it as an option but they’re pushing back. I was hoping you did the same and had a good resource as to why :)
I do like the vertical/inline bit.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Depending on your document structure you can use something like this. I use a handful of classes for form element alignment (.inline, .vertical, .overlay). If you're concerned about screen readers there are a handful of ARIA tags you can use to make sure the form reads well.