Checkboxes and Radio Buttons

Checkboxes and radio buttons are similar in their options and markup. The main difference is that you can select only a single radio button from a group. However, you can select one, many, or all checkboxes in a group. Each element type has the same layout options. For example, when you add a label and a checkbox or a label and a radio button, you’ll receive the label and the element embedded in a button:

<label for="my-radio">Radio button example</label>
<input type="radio" name="name" id="my-radio" class="my-radio" />
<label for="my-checkbox">Checkbox example</label>
<input type="checkbox" name="name" id="my-checkbox" class="my-checkbox" />

The result of this code can be seen in Figure 10.11.

Figure 10.11. The layout and sequence from selecting a radio button and checkbox.