Skip to content

Instantly share code, notes, and snippets.

@bpainter
Created December 7, 2011 15:42
Show Gist options
  • Save bpainter/1443254 to your computer and use it in GitHub Desktop.
Save bpainter/1443254 to your computer and use it in GitHub Desktop.
Basic HTML for radio & checkbox markup
%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
.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
@bpainter
Copy link
Author

bpainter commented Dec 7, 2011

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.

@iamdustan
Copy link

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