Open In App

Radio Button Vs Checkbox in HTML

Improve
Improve
Like Article
Like
Save
Share
Report

Radio buttons allow users to select only one option from a group, while checkboxes permit multiple selections. Use radio buttons when exclusive choices are needed, and checkboxes for multiple independent choices.

Table of Content

Radio button:

It is generally used in HTML forms. HTML forms are required when you need to collect some data from site visitors. A radio button is used when you want to select only one option out of several available options.

Example 1: In this example, we will see the use of radio buttons with an example.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>GeeksfoGeeks</title>
</head>
 
<body>
    <form>
        Do you agree this statement?
        <br>
        <input type="radio"
               name="agree"
               value="yes">Yes
        <br>
        <input type="radio"
               name="agree"
               value="no">No
        <br>
        <input type="Submit">
    </form>
</body>
 
</html>


Output:

Checkbox:

Checkboxes are also mostly used in HTML forms. A checkbox allows you to choose one or many options to be selected from a list of options.

Example 2: In this example, we will see the use of checkboxes with an example.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>HTML Checkboxes</title>
</head>
 
<body>
    <form>
        Choose languages you know:
        <br>
        <input type="checkbox"
               name="C"
               value="yes">C
        <br>
        <input type="checkbox"
               name="C++"
               value="yes">C++
        <br>
        <input type="checkbox"
               name="Java"
               value="yes">Java
        <br>
        <input type="checkbox"
               name="Python"
               value="yes">Python
        <br>
        <input type="Submit">
    </form>
</body>
 
</html>


Output:

Difference between radio button and checkbox

Radio button Checkbox
Radio button is used when only one option to be selected out of several available options. Checkbox allows one or many options to be selected.
Radio button is created by using HTML <input> tag but type attribute is set to radio. It is also created using HTML <input> tag but type attribute is set to checkbox.
Radio button is a single control unit. It is a multiple control unit.
Radio button is presented as a small circle on the screen. Checkbox is presented as a small square box on the screen.
Radio button have only 2 states namely- True & False. Checkbox have 3 states namely- Checked, unchecked & indeterminate.
Radio button is used when you want to limit the users choice to just one option from the range provided. It is used when you want to allow user to select multiple choices.


Last Updated : 23 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads