Easy Enyo Checkbox Labels

In a recent Enyo project I needed a labeled vertical group of checkboxes for setting the app’s preferences. I was hoping that I could just put a bunch of onxy.Checkbox components from Enyo’s Onxy widget library inside a Group component and use the content property of each checkbox as its label. This is the code:

{
    kind: "Group",
    classes: "labeled-group",
    highlander: true,
    components: [
        {kind: "onyx.Checkbox", content: "Option one", checked: true},
        {kind: "onyx.Checkbox", content: "Option two"},
        {kind: "onyx.Checkbox", content: "Option three"},
        {kind: "onyx.Checkbox", content: "Option four"}
    ]
}

Unfortunately, the results weren’t quite what I expected:

The content text was displayed inside the checkbox and the checkboxes were positioned horizontally instead of vertically. Happily, just a little bit of CSS solved the problem:

.labeled-group {
    padding-top:6px;
}
.labeled-group > li {
    display:block;
    width: auto;
    padding-left: 35px;
    line-height: 30px;
    margin: 0 6px 6px 6px;
}

With the above CSS, the checkboxes were displayed just as I was expecting:

So, how does it work? An Onyx checkbox is just a DIV tag with a background image which displays its state (checked or unchecked). First, we set each checkbox to display:block so that it appears on its own line. Next we give it a width:auto so that it takes up the entire width of its containing element. To get the label text (the checkbox’s content property) out of the checkbox itself, we use padding-left to move the text to the right. to vertically center the text, we set the line-height to the height of the checkbox.

While we’re playing around with the CSS, we’ll add some margins to give some extra space between the checkboxes and the containing element.

A nice side effect is that the user can tap on the label as well as the checkbox to select it since the checkbox DIV is now the width of the containing element.

Tested in Windows on Chrome version 25, Firefox version 19 and IE 10 and on Android Chrome version 25.