In this section, we will learn what the HTML <input type = “radio”> is and how to use it.

Radio Buttons in HTML: What is input type radio in HTML?

We use HTML <input type = “radio”> element to create radio buttons on a webpage.

We use radio buttons in a form when we want to provide a list of options where users can only select one item on that list.

Radio buttons are usually grouped together in a form. In order to group them together, we use the attribute `name` and set the same value for all the radio buttons in the group.

In such a group, only one radio button can be selected at a time. This means you can’t have multiple radio buttons in the same group be selected at the same time.

When the form data is submitted to a server, only the value of the selected radio button is sent along with the form data.

HTML Input Type Radio Values:

Radio buttons can’t take inputs directly from users. So we need to set a predefined value for each button using the value attribute.

HTML input type radio Syntax:

<input type = “radio” name = “name” value = “value”>

Group Radio Buttons in HTML

As mentioned before, in order to group radio buttons together, we use the `name` attribute.

The value set for the `name` attribute should be the same for all radio buttons on a list.

For example, if you have a list of 5 radio buttons on a list and the first one is named “brand” then the rest also should have the value “brand” for their `name` attribute.

Example: using <input type=”radio”> in HTML

See the Pen using <input type="radio"> in HTML by Omid Dehghan (@odehghan) on CodePen.