Group form inputs that relate to each other
Applicable Role(s): Developer
Overview
If your form has a series of checkboxes or radio buttons, like a "yes/maybe/no" set of options, it helps users to understand what overall question each of those buttons is answering. This grouping can tie inputs that relate to each other as well, instead of seeming like random inputs.
Best Practices
- If you have checkbox or radio inputs, they should be wrapped in a fieldset.
- The fieldset should be named with a <legend> that describes the overall grouping or question.
- Keep the border around the fieldset. The border makes it easier to tell quickly which inputs relate to each other.
Pattern Examples
Code
<fieldset><legend>The play "Hamlet" was written by:</legend><input checked="checked" id="shakesp" name="hamlet" type="radio" value="a" /><label for="shakesp">William Shakespeare</label><input id="kipling" name="hamlet" type="radio" value="b" /><label for="kipling">Rudyard Kipling</label><input id="gbshaw" name="hamlet" type="radio" value="c" /><label for="gbshaw">George Bernard Shaw</label><input id="hem" name="hamlet" type="radio" value="d" /><label for="hem">Ernest Hemingway</label><input id="dickens" name="hamlet" type="radio" value="e" /><label for="dickens">Charles Dickens</label></fieldset>
Rendered Fieldset
Note: this is not an actual fillable form input.