How do I group radio buttons in HTML?

Give every option in the same choice group the same name attribute. The browser then allows only one selected value for that field.

Do radio buttons need a value attribute?

Yes. The value attribute is what your form backend receives when that radio option is selected. Without a value, the submitted data is harder to understand.

How do I make a radio group required?

Add required to at least one radio input in the group. The browser will require the visitor to choose one option before submitting.

Should radio buttons use fieldset and legend?

Yes for most grouped choices. Fieldset and legend give screen readers the question context before each radio option.

HTML Radio Button Form Guide

Radio buttons are the right control when a visitor must choose exactly one option from a short list. They work well for plan selection, contact preferences, budget ranges, yes/no questions, and survey answers.

The common mistake is treating radio buttons as small visual widgets instead of form data. A production radio group needs a clear question, accessible labels, stable name and value attributes, validation, and a backend that receives the selected value cleanly.

Basic radio button form

Use the same name for every option in the group. Use a different value for each option.

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <fieldset>
5
    <legend>Preferred contact method</legend>
6

7
    <label>
8
      <input type="radio" name="contact_method" value="email" required />
9
      Email
10
    </label>
11

12
    <label>
13
      <input type="radio" name="contact_method" value="phone" />
14
      Phone
15
    </label>
16

17
    <label>
18
      <input type="radio" name="contact_method" value="text" />
19
      Text message
20
    </label>
21
  </fieldset>
22

23
  <input type="checkbox" name="botcheck" style="display:none" />
24
  <button type="submit">Send preference</button>
25
</form>

If the visitor selects “Email”, the backend receives:

1
contact_method=email

That is the entire point of a radio group: one field name, one selected value.

Radio buttons vs checkboxes vs select dropdowns

Choose the input based on the decision you are asking the visitor to make.

Control	Best for	Avoid when
Radio buttons	One choice from 2-5 visible options	The list is long
Checkboxes	Multiple independent choices	Only one answer is allowed
Select dropdown	One choice from many options	The options must be compared at a glance

Radio buttons are usually better than a dropdown when the options are few. Visitors can scan all choices without opening a menu.

Use fieldset and legend for accessibility

Labels identify individual options. A legend identifies the question the options answer.

1
<fieldset>
2
  <legend>Which plan are you interested in?</legend>
3
  <label><input type="radio" name="plan" value="free" required /> Free</label>
4
  <label><input type="radio" name="plan" value="pro" /> Pro</label>
5
  <label><input type="radio" name="plan" value="business" /> Business</label>
6
</fieldset>

This structure helps screen reader users understand that “Free”, “Pro”, and “Business” are all answers to the same plan question.

Required radio groups

To require an answer, add required to one radio input in the group. You can add it to every option, but one is enough because the browser validates the group by name.

1
<label>
2
  <input type="radio" name="budget" value="under-1000" required />
3
  Under $1,000
4
</label>
5
<label>
6
  <input type="radio" name="budget" value="1000-5000" />
7
  $1,000 to $5,000
8
</label>

Do not rely only on client-side validation. Your form backend should also accept only expected values when the field controls important routing or business logic.

Default selections

Use a default selection only when it is genuinely safe.

1
<label>
2
  <input type="radio" name="newsletter_frequency" value="weekly" checked />
3
  Weekly
4
</label>
5
<label>
6
  <input type="radio" name="newsletter_frequency" value="monthly" />
7
  Monthly
8
</label>

A default can reduce friction for harmless preferences. Avoid defaults for consent, pricing intent, donations, surveys, or anything where preselecting an answer may bias the response.

Styling radio buttons without breaking them

Keep the native input in the DOM and keep the label clickable. This gives you keyboard support and screen reader support without custom JavaScript.

1
<fieldset class="radio-cards">
2
  <legend>Project type</legend>
3

4
  <label>
5
    <input type="radio" name="project_type" value="website" required />
6
    <span>Website</span>
7
  </label>
8

9
  <label>
10
    <input type="radio" name="project_type" value="saas" />
11
    <span>SaaS app</span>
12
  </label>
13
</fieldset>

1
.radio-cards {
2
  display: grid;
3
  gap: 12px;
4
  border: 0;
5
  padding: 0;
6
}
7

8
.radio-cards label {
9
  display: flex;
10
  align-items: center;
11
  gap: 10px;
12
  border: 1px solid #d6d3d1;
13
  border-radius: 8px;
14
  padding: 12px;
15
  cursor: pointer;
16
}
17

18
.radio-cards label:has(input:checked) {
19
  border-color: #059669;
20
  background: #ecfdf5;
21
}

Complete example with a hosted form backend

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="subject" value="New project inquiry" />
4

5
  <label for="email">Email</label>
6
  <input type="email" id="email" name="email" required />
7

8
  <fieldset>
9
    <legend>What do you need?</legend>
10
    <label><input type="radio" name="need" value="website" required /> Website</label>
11
    <label><input type="radio" name="need" value="automation" /> Automation</label>
12
    <label><input type="radio" name="need" value="support" /> Support</label>
13
  </fieldset>
14

15
  <fieldset>
16
    <legend>Budget range</legend>
17
    <label><input type="radio" name="budget" value="under-1000" required /> Under $1,000</label>
18
    <label><input type="radio" name="budget" value="1000-5000" /> $1,000 to $5,000</label>
19
    <label><input type="radio" name="budget" value="5000-plus" /> $5,000+</label>
20
  </fieldset>
21

22
  <textarea name="message" rows="5" placeholder="Add context"></textarea>
23
  <input type="checkbox" name="botcheck" style="display:none" />
24

25
  <button type="submit">Send inquiry</button>
26
</form>

This version gives the backend normalized values, gives users readable labels, and keeps the form usable without JavaScript.

For a broader starting point, see the HTML form examples page. If you need multi-line responses, use the HTML textarea guide. For general validation patterns, read the HTML form validation guide.

HTML radio buttons in forms: production-ready guide

Basic radio button form

Radio buttons vs checkboxes vs select dropdowns

Use fieldset and legend for accessibility

Required radio groups

Default selections

Styling radio buttons without breaking them

Complete example with a hosted form backend

Frequently asked questions

Ready to add forms to your static site?

Basic radio button form

Radio buttons vs checkboxes vs select dropdowns

Use fieldset and legend for accessibility

Required radio groups

Default selections

Styling radio buttons without breaking them

Complete example with a hosted form backend

Related guides

Frequently asked questions

Ready to add forms to your static site?