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 and Tips

  • 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.

Examples/Patterns

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.

The play "Hamlet" was written by: