The Complete Guide to HTML Radio Buttons

When designing web forms, one of the most common interface elements you‘ll use is the humble radio button. Named after the analog preset buttons on old radios, radio buttons allow users to select a single option from a group of two or more mutually exclusive choices. Despite their small size, radio buttons play an important role in creating intuitive, accessible forms.

In this comprehensive guide, you‘ll learn everything you need to know to effectively use HTML radio buttons in your web projects. Let‘s start with the basics.

What Are HTML Radio Buttons?

In HTML, a radio button is an input element that appears as a small circular button on the page. When clicked, the button fills in to indicate selection. Radio buttons are almost always presented to users in groups of related options. The defining feature of radio button groups is that only one option can be selected at a time – selecting a new option will automatically deselect the previously selected option.

Functionally, radio buttons allow users to make a single selection from a set of options. This makes them useful for collecting mutually exclusive data points, such as:

• Package or plan selection (Basic, Pro, Enterprise)
• Shipping method (Standard, Express, Overnight)
• Demographic information (Age range, Income bracket, etc.)

Radio buttons are often compared to checkboxes, which are another common input type. The key difference is that checkboxes allow for multiple selections within a group, while radio buttons enforce single selection. If you want to let users select multiple options, use checkboxes instead.

How to Create Radio Buttons in HTML

The HTML for a basic radio button looks like this:

The type="radio" attribute tells the browser to render this input as a radio button.

However, this code on its own isn‘t very useful. To create an effective radio button interface, you‘ll also need to:

1. Group related options together
2. Provide labels for each option
3. Set default selections
4. Connect the radio buttons to the overall form

Grouping Radio Buttons

To group multiple radio buttons together, give them the same name attribute value:

All radio buttons with the same name are considered part of the same group, and the browser will only allow one option in that group to be selected at a time.

Labeling Radio Buttons

To label your radio buttons, use the element in conjunction with the id attribute on the radio button itself:

Red
  
Green

Blue

The for attribute on the connects it to the id of the corresponding radio button. Clicking the label text will check/select the associated radio button.

Using elements is important for both usability and accessibility. It increases the clickable area of the radio button and provides a textual alternative for screen readers.

Setting Default Selections

You can set a default selected radio button by adding the checked attribute:

Red  

The radio button with the checked attribute will automatically be selected when the page loads.

Using Radio Buttons in a Form

To submit the selected radio button value as part of a form, make sure to put your radio button code inside a element:

  Red

  Green  

  Blue
Submit
  

When the form is submitted, the name of the radio group ("color") and the value of the selected option will be sent to the server. If no option is selected, no value will be submitted for that input.

Radio Button Best Practices

While the code for radio buttons is fairly straightforward, there are some best practices to keep in mind when using them in your UI:

Use Clear Labels

Your radio button labels should be concise, descriptive, and mutually exclusive. Avoid vague or overlapping options.

Limit the Number of Options

If you have more than 5-7 options, consider using a different input type like a dropdown select menu. Too many radio buttons can overwhelming.

Arrange Options Vertically

Arranging radio buttons vertically (as opposed to horizontally) makes them easier to scan and differentiate. Use horizontal layouts only for small groups of 2-3 options.

Indicate Required Fields

If a radio button group is a required field in your form, use visual cues like asterisks or "(required)" text to indicate this to users.

Styling Radio Buttons with CSS

The default styling of radio buttons varies across browsers and devices. To ensure a consistent look and feel, you‘ll likely want to apply your own custom CSS styles.

There are a two main approaches to styling radio buttons with CSS:

1. Modifying the default appearance
2. Creating custom radio buttons from scratch

Modifying Default Radio Buttons

You can modify the default appearance of radio buttons with CSS properties like width, height, border, border-radius, and appearance:

input[type="radio"] {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  appearance: none;
}
input[type="radio"]:checked {
background-color: #007bff;
border-color: #007bff;
}

The appearance: none; declaration resets the default radio button styling, giving you a blank slate to work with. The :checked pseudo-class targets the selected radio button, allowing you to style it differently.

Custom Radio Buttons

For more advanced customization, you can create your own radio button design from scratch using a combination of HTML, CSS, and JavaScript.

The general technique is to visually hide the default element and create a new styled version using other HTML elements like or

  
  
  Option 1


  input[type="radio"] {
    position: absolute;
    opacity: 0;
  }
.radio-btn {
display: inline-block;
width: 20px;

height: 20px;
border: 2px solid #ccc;
border-radius: 50%;
margin-right: 5px;
vertical-align: middle;
}
input[type="radio"]:checked + .radio-btn {
background-color: #007bff;
border-color: #007bff;
}

  
Choose a color:

  Red

  Green

  Blue

  
Choose a color:
Red
  
Green
  
Blue