HTML Radio Button Label | Input, Group, Checked with examples

HTML Radio Button Label is allow to user choose only one option in predefine set of option. The choosing only option makes it distinct from a CheckBox button. It’s look an option to user a circular button, as by default design if user click on it. then it will fill with another fulled circle.

HTML Radio Button Label Input, Group, Checked with examples

This tutorial, you will learn about What is HTML Radio Button Label and how to use it. How the Input tag has to use to get Radio button, Radio button Group and get checked value etc with examples.


A same as checkbox used input tag with define a type. here just you have to mentioned a type=”radio”.

HTML Radio Button Example

You have to use a <input> tag with the radio type attribute. Her is an example of how to use a Radio Button in HTML. In the example, we are creating an option button for select and gender.

There are 3 buttons options and for connection of them use the name attribute, which is the main purpose of a Radio button to work get together and allow only on option. The name Attribute should be the same identical name in this example all button has only name=”gender”.

Output: In a GIF, you can see only one option can select.

HTML Radio Button Example

Radio Button checked

You can give checked as default option in Radio group. Just write checked in input tag. See below code line example HTML Radio Button checked by default.

HTML Radio Button Value

To get the value of the selected item you need to first give the value on the element. Use this code line.

Below is a complete example of how it will work, for that you need to write some javascript code.

Output: When option is not selected and select will show popup with getting value.

Get the HTML Radio Button Value example

Radio Button Group

You can define an HTML Radio Group. Here is an example html radio button group example. Using <form> then <filedset> for grouping a Radio input elements.

Q: How to HTML Radio Button list horizontal?

Answer: You can write Radio Button list horizontal by using an element one by one without using <br> tag. To get The vertical html radio button list just use a <br> tag.

Q: How to html radio button label same line?

Answer: There is 2 ways to do it either write a content in <label> tag or in <input> tag.

See the below code of line Radio button label in same line.


How to html radio button label same line?

Q: How to know HTML Radio Button checked?

Answer: Use this syntax, which Return the checked property in boolean.

It will returns true if the radio button is checked, and false if the radio button is not checked.

If you have any doubt and suggestions regarding this tutorial, then do comment in below. Mainly html radio button is used with form in web application. We will it another tutorial.

Note: The All HTML Radio Button Label Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.