CodesBeautify

HTML Radio Generator

Generate a radio button group with a shared name, labels, values and a fieldset wrapper.

Radio group HTML3 radios named plan
<fieldset>
  <legend>Choose a plan</legend>
  <label for="plan-free"><input type="radio" id="plan-free" name="plan" value="free" checked> Free</label>
  <label for="plan-pro"><input type="radio" id="plan-pro" name="plan" value="pro"> Pro</label>
  <label for="plan-team"><input type="radio" id="plan-team" name="plan" value="team"> Team</label>
</fieldset>
Runs locally in your browser

About the HTML Radio Generator

Radio buttons only behave as a group when every button shares the same name, and that single detail is what most hand written groups get wrong. Type your choices as a comma separated list and this builder emits one input per choice, all sharing the name you set, each with a value derived from the visible text and a label tied to it by for and id. Pick which option starts selected, or set the number to zero for a group that begins empty.

The fieldset and legend wrapper is on by default because a set of radios needs a group label. Without it a screen reader reads the individual choices with no idea what question they answer. Marking the group required only needs the attribute on one member, which is what the generated code does, and browsers then block submission until something in the group is chosen. The inline option adds a small flexbox rule so the choices sit in a row instead of a column.

Radios suit two to about seven mutually exclusive options that someone should be able to compare at a glance. Past that a select is less tiring to scan, and if several answers can be true at once you want checkboxes instead. Once the form is assembled, the HTML Validator will catch duplicate ids and stray attributes before they reach production.

How to use

  1. Type the choices separated by commas, in the order you want them shown.
  2. Set the shared name, which is the key your server reads.
  3. Choose which option is pre-selected, or enter 0 to leave the group empty.
  4. Copy the fieldset and drop it into your form.

Common questions

Why do my radios not deselect each other?
They have different name attributes. Every button in one group must share exactly the same name for the browser to treat them as alternatives.
Where does the submitted value come from?
From the value attribute of the selected input, which this tool derives from the visible text in lowercase with hyphens.
Should one option be selected by default?
Only when a sensible default exists. For a question with no safe answer, start empty and mark the group required.
Do I need required on every radio?
No. One member carrying the attribute makes the whole group mandatory.