HTML radio buttons, explained.

A group of radio buttons

<fieldset>
  <legend>Budget</legend>
  <label><input type="radio" name="budget" value="Under $5k" required /> Under $5k</label>
  <label><input type="radio" name="budget" value="$5k to $15k" /> $5k to $15k</label>
  <label><input type="radio" name="budget" value="Over $15k" /> Over $15k</label>
</fieldset>

• The same name makes a group. Only one radio button with a given name can be checked at a time; choosing another unchecks the first.
• value is what is sent. The form sends budget=$5k to $15k, not the label text. Without a value, a checked radio sends the word on, which is rarely what you want.
• Nothing checked means nothing sent. If the visitor picks no option, the group is left out of the submission entirely.
• required on any one radio in the group makes the whole group required: the browser will not send the form until one option is chosen.

Labels, fieldset and legend

Wrap each radio button in its <label>, as above, or link them with for and id. Either way, clicking the text selects the option, which gives visitors a much bigger target than the small circle.

<input type="radio" id="size-s" name="size" value="Small" />
<label for="size-s">Small</label>

Put the group in a <fieldset> with a <legend>. The legend is the question; screen readers announce it together with each option, so “Under $5k” is heard as an answer to “Budget”.

From the keyboard, Tab moves into the group once and the arrow keys move between its options, checking each in turn.

A default choice

Add checked to the option that should be selected when the page loads. Use a default only when one answer is clearly the usual one: a pre-selected budget, for example, quietly nudges people towards it.

<fieldset>
  <legend>How should we reply?</legend>
  <label><input type="radio" name="reply_by" value="Email" checked /> Email</label>
  <label><input type="radio" name="reply_by" value="Phone" /> Phone</label>
</fieldset>

Once a group has a checked option, the visitor cannot clear it by clicking it again. If “no preference” is a real answer, add it as its own option.

Read the choice in JavaScript

form.elements.budget returns the whole group, and its value is the value of the checked option, or an empty string when none is checked. Listen for change to react when the choice changes.

const form = document.querySelector('form');

// The value of the checked radio in the group, or an empty string if none is checked
const budget = form.elements.budget.value;

// React to a change of choice
form.addEventListener('change', (event) => {
  if (event.target.name === 'budget') console.log('Chosen:', event.target.value);
});

Style radio buttons

accent-color recolours the native radio button in every current browser and keeps its built-in keyboard and screen-reader behaviour. That is usually all the styling a form needs.

/* Recolour the native radio buttons */
input[type="radio"] { accent-color: #45436f; width: 18px; height: 18px; }

/* Make the whole option easy to tap */
fieldset label { display: flex; align-items: center; gap: 8px; padding: 6px 0; }

A fully custom design starts from appearance: none and draws the circle yourself. Keep a visible focus outline when you do, so keyboard users can see where they are.

Radio buttons, checkboxes or a dropdown?

• Radio buttons: one answer from a few options (up to about five or six), all visible at once.
• Checkboxes: any number of answers, including none. See the HTML checkbox.
• A dropdown: one answer from a long list, where showing every option would take too much space. See HTML select dropdowns.

A form that sends

This quote request posts to Heartdove, which saves every message, emails you an alert and tracks it until it is delivered or bounces. The chosen budget arrives as its own labelled field, “Budget: $5k to $15k”, in your inbox and in the alert.

<form action="https://submit.heartdove.com/v1/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <input type="hidden" name="subject" value="Quote request" />

  <label for="email">Email</label>
  <input id="email" type="email" name="email" autocomplete="email" required />

  <fieldset>
    <legend>Budget</legend>
    <label><input type="radio" name="budget" value="Under $5k" required /> Under $5k</label>
    <label><input type="radio" name="budget" value="$5k to $15k" /> $5k to $15k</label>
    <label><input type="radio" name="budget" value="Over $15k" /> Over $15k</label>
  </fieldset>

  <label for="message">Project details</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <input type="checkbox" name="botcheck" tabindex="-1" autocomplete="off" style="display:none" />
  <button type="submit">Request a quote</button>
</form>

Replace YOUR_ACCESS_KEY with your key from a free Heartdove form. Build a form like this without writing the HTML in the contact form generator, where “Choose one” adds a radio group.

Questions

Keep reading

• The HTML checkbox
• Fieldset and legend
• HTML select dropdowns
• All HTML input types