Checkbox and Radio Generator
Generate accessible checkbox and radio groups wrapped in a fieldset with a legend, each input paired with its label.
Accessible checkbox or radio group markup.
Live preview
<fieldset>
<legend>Interests</legend>
<div>
<input type="checkbox" id="topics-1" name="topics" value="css">
<label for="topics-1">CSS</label>
</div>
<div>
<input type="checkbox" id="topics-2" name="topics" value="html">
<label for="topics-2">HTML</label>
</div>
<div>
<input type="checkbox" id="topics-3" name="topics" value="js">
<label for="topics-3">JavaScript</label>
</div>
</fieldset>About the checkbox and radio generator
A group of related choices belongs in a fieldset with a legend. The legend is what screen readers announce before reading the options, so without it the choices have no context.
Radios in a group must share a name attribute, which is what makes them mutually exclusive. Checkboxes with the same name submit as a list.
How to use it
- 1Choose checkbox or radio.
- 2Set the shared name.
- 3Add options one per line, using value|Label.
- 4Write a legend describing the group.
- 5Copy the HTML.
Questions
Why do my radio buttons not behave as a group?
They do not share a name attribute. The name is what groups them, not their position in the markup.
Why use a fieldset?
It groups related controls and the legend gives them a heading. Without it a screen reader reads each option with no idea what question it answers.
Should required go on every radio?
Only one in the group needs it. The browser treats the whole group as required.