How to use
- Type the group label — it becomes the legend of the fieldset.
- Set the name attribute that all radios in the group share.
- Edit the options; the small radio on the left marks the default choice.
- Switch between vertical and horizontal layout.
- Copy the HTML and paste it into your form.
What is a radio group?
A radio group is a set of <input type="radio"> elements that share the same name attribute. The shared name is what makes them one group: the browser enforces mutual exclusivity, keyboard arrow keys move the selection inside the group, and form submission sends a single name=value pair for whichever option is checked. The name comes from the physical preset buttons on old car radios — pressing one popped the others out, and exactly one was always in.
A complete group has three parts beyond the inputs themselves: a <label> for each option (clickable text, larger hit target), a group label so users know what the question is, and — for the accessible version — a <fieldset> with a <legend> wrapping everything. Screen readers announce the legend before each option, which turns a row of anonymous circles into a real question with answers.
The minimal code
<fieldset>
<legend>Choose a shipping method</legend>
<label><input type="radio" name="shipping" value="standard" checked> Standard</label>
<label><input type="radio" name="shipping" value="express"> Express</label>
<label><input type="radio" name="shipping" value="overnight"> Overnight</label>
</fieldset>Note the value attributes: the visible text is for humans, the value is what your form actually submits. They can differ — a common pattern is a short machine value (overnight) with a descriptive label ("Overnight delivery, arrives before 10:30").
Common mistakes
- Forgetting the shared
name. Without it every button is its own group of one and multiple options can be selected at once — the classic broken radio form. - Omitting
value. The browser then submits the literal stringonfor whichever option is checked, and your backend cannot tell the choices apart. - Using a plain
<p>or heading instead of a<legend>. It looks the same visually but is invisible to assistive technology. - Leaving no default and no
required. A radio group starts as "no answer", and without validation the form can be submitted with the question skipped. - Using radios for independent toggles. If more than one option can be true at the same time, they are
<input type="checkbox">, not radios.
Radio buttons and accessibility
Native radio inputs are accessible for free when wired correctly: each label gives the button its accessible name, the fieldset/legend pair names the group, and the browser provides arrow-key navigation within the group and the spacebar to select. Problems start when developers rebuild the visuals with <div>s and JavaScript, or hide the input with display: none and break keyboard focus. If you restyle, keep the input in the DOM (visually hidden with opacity or appearance is fine) so the native semantics keep working. This generator outputs the native structure precisely so that you can style it later without losing accessibility.
FAQ
How do I create a radio group in HTML?
Give every radio button in the group the same name attribute and a different value. Browsers treat all inputs that share a name as one group, so only one can be selected at a time. Wrap the group in a fieldset with a legend to label it accessibly, and connect each input to its text with a label element. This generator produces exactly that structure — pick your options and copy the code.
Why is only one radio button selected at a time?
That is the defining behavior of a radio group: inputs that share the same name are mutually exclusive, a convention inherited from old car radios where pressing one button physically popped the others out. If you want multiple independent toggles, use checkboxes instead — each checkbox has its own name and can be on or off regardless of the others.
What is the difference between radio buttons and checkboxes?
Radio buttons are for choosing exactly one option from a mutually exclusive list; checkboxes are for choosing any number of independent options, including none. A rule of thumb: if the options answer 'which one?' use radios — if they answer 'which ones?' use checkboxes. Radios also always have a selection once the user interacts (or if one is pre-checked), while all checkboxes can stay unchecked.
How do I make a radio group required in an HTML form?
Add the required attribute to one radio button in the group — the constraint applies to the whole group, so a single attribute is enough. The form then cannot be submitted until one option is chosen, and the browser shows its native validation message. Keep in mind that a radio group with no pre-selected option starts as 'no answer', which is why many forms pre-check the most common choice.
Should I use fieldset and legend for radio groups?
Yes when the group has a question-like label. The legend gives the group a programmatic name that screen readers announce before reading the options, which is far clearer than a lone heading above unlabeled inputs. Every option still needs its own label element. This generator wraps the group in fieldset/legend by default; you can turn it off if your framework renders its own grouping.
Does this tool upload my options?
No. Everything runs in your browser. There is no network request after the page loads, so the option labels you type never leave your device.
Related tools
References
Last updated: 2026-09-01