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>What the checkbox and radio generator does
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.
Using the tool
- 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.
Common 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.