Tutorials Tonight's Logo
Follow Us

HTML RADIO BUTTON


In this article, you will learn everything about the HTML radio button. Its use, grouping it, styling it using CSS and triggering events on it using JavaScript.

You must have filled a form before and would have interacted with multiple choices among which the only one could be selected, like gender selection, blood group selection, etc.

These are called radio buttons.

HTML radio button

The radio buttons in HTML is made using <input> tag. Practically radio buttons are used in the group among which when you select one then the other already get unselected if it was previously selected.

Radio Button

Radio button is an <input> element of type="radio" accepting only one selecetion among multiple choces.

It can be nested inside <form> element or can be used alone.

To create a radio button give <input> element a type of radio.

Here is an example of HTML radio button:

HTML radio button example

<input type="radio" name="contact" value="male"> Email
<input type="radio" name="contact" value="female"> Phone
<input type="radio" name="contact" value="other"> Mail

Output:

Email Phone Mail

HTML Radio Button Group

The radio buttons are practically used as a group and in a group, all the radio elements are connected. Among a group only one button can be selected at a time.

Here is an example where radio buttons are not part of a group.

<input type="radio"> Email
<input type="radio"> Phone
<input type="radio"> Mail

Output:

Email Phone Mail

You can see in the above example you can select all the radio buttons at once. This is because for a radio button to be select only one among multiple, all buttons should be part of a single group.

A radio group is defined by giving each radio button in the group the same value of name attribute.

When multiple radio buttons are given the same name then it becomes part of a group and when you select any radio button of that group it automatically deselects any other selected button in that group.

Example

<form>
  <p>Please select your preffered way to contact:</p>
  <input type="radio" name="contact" id="choiceEmail" value="email">
  <label for="choiceEmail">Email</label>

  <input type="radio" name="contact" id="choicePhone" value="phone">
  <label for="choicePhone">Phone</label>

  <input type="radio" name="contact" id="choiceMail" value="mail">
  <label for="choiceMail">Mail</label>
  <br>
  <input type="submit" value="Submit">
</form>

Output:

Please select your preferred way to contact:


You can see in the above example the three radio buttons are each set with name="contact" which put them in a single group, but each button has a unique value, specified by the value attribute.

The id of the radio button is used by the <label> element to associate the labels with the radio buttons.


Attributes of HTML Radio Group

Here is a brief description of some frequently used attributes in radio buttons.

Attribute description
type It specifies input type, it must be added to create the type of button you want, i.e. radio
name It creates a radio group, 1 or more than one radio buttons with same name comes under same group
value It deliver the selected button to the server if the radio button is checked
checked It selects a radio button by default

Selecting Radio Button By Default

It is better to select the most probable radio button by default because if no option is selected while submitting the form then the radio group is not included in the submitted data at all since there is no data to deliver to the server.

To select a radio button by default add a checked attribute to the button.

Example

<form>
  <p>The Email button is selected by default:</p>
  <input type="radio" name="contact" id="choiceEmail" value="email" checked>
  <label for="choiceEmail">Email</label>

  <input type="radio" name="contact" id="choicePhone" value="phone">
  <label for="choicePhone">Phone</label>

  <input type="radio" name="contact" id="choiceMail" value="mail">
  <label for="choiceMail">Mail</label>
  <br>
  <input type="submit" value="Submit">
</form>

Output:

The Email button is selected by default:



Adding JavaScript To Radio Button

You can trigger an event to know which radio button is checked. For this select all radio buttons and add an onclick event to all button.

When the button is checked it alerts a message with the value of the radio button selected.

Example

const buttons = document.querySelectorAll("input[type='radio']");
buttons.forEach(button => {
  button.onclick = () => {
    if (button.checked) {
      alert(button.value + " selected as contact option!");
    }
  }
})

Output:



Radio Button Style

Create your own custom radio button and style it using CSS since the browser's radio button is styled by the browser itself.

Let the HTMl code for the form with radio button be as follows:

<form>
  <label>Email
    <input type="radio" name="radio" value="email" checked>
    <span class="custom-radio-button"></span>
  </label>
  <label>Phone
    <input type="radio" name="radio" value="phone">
    <span class="custom-radio-button"></span>
  </label>
  <label>Mail
    <input type="radio" name="radio" value="mail">
    <span class="custom-radio-button"></span>
  </label>
  <br>
  <input type="submit" value="Submit">
</form>

Here is complete CSS code to create a custom styled radio button.

Example

label {
  display: block;
  position: relative;
  padding-left: 50px;
  margin: 10px 0;
  cursor: pointer;
  font-size: 20px;
}

/* Hide the default radio button */
label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Creating own radio button to style */
.custom-radio-button {
  position: absolute;
  top: 0;
  left: 0;
  height: 24px;
  width: 24px;
  background-color: #eee;
  border-radius: 50%;
}

/* hover effect on unchecked buttons */
label:hover input+.custom-radio-button {
  background: #fdd;
}

/* button checked */
label input:checked+.custom-radio-button {
  background-color: #bd1c10;
}

/* White dot on checked radio button (hidden) */
label .custom-radio-button:after {
  content: "";
  display: none;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Show the dot on checked button */
label input:checked+.custom-radio-button:after {
  display: block;
}

input[type="submit"]{
  border: none;
  color: white;
  font-size: 18px;
  padding: 5px 15px;
  background: #bd1c10;
  border-radius: .25rem;
}

Output:

style radio button

Data Representation Of Radio Group

When a form is submitted with a radio button then the form's data include an entry in the form name=value, here in the above case on option could be contact=email.

If there is no value attribute in a radio button then data related to the radio button is not reported to the server.

Conclusion

You learned about radio buttons. Creating a group of radio buttons. Different types of attributes in it. Triggering an event when the button is checked and learned to style radio buttons.

You can also style the radio buttons using CSS.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.