DEV Community

Cover image for Radio Button Vs Checkbox in HTML
Saravanan Lakshmanan
Saravanan Lakshmanan

Posted on

Radio Button Vs Checkbox in HTML

Radio Button Vs Checkbox in HTML
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.

These are the following topics that we are going to discuss:

Table of Content

  • Radio button
  • Checkbox
  • Difference between radio button and checkbox

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: This example shows the use of Radio buttons.

<!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>
Enter fullscreen mode Exit fullscreen mode

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: This example shows the use of checkbox.

<!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>
Enter fullscreen mode Exit fullscreen mode

Difference Between Radio Button and Checkbox in HTML

Radio Button

  • Used when only one option should be selected from multiple available choices.
  • Created using the HTML <input> tag with type="radio".
  • Works as a single selection control.
  • Displayed as a small circle on the screen.
  • Has 2 states: Selected and Unselected.
  • Mainly used when you want to restrict the user to one choice only.

Example: 

<input type="radio" name="gender"> Male
<input type="radio" name="gender"> Female
Enter fullscreen mode Exit fullscreen mode

Checkbox

  • Used when one or multiple options can be selected.
  • Created using the HTML <input> tag with type="checkbox".
  • Works as a multiple selection control.
  • Displayed as a small square box on the screen.
  • Has 3 states: Checked, Unchecked, and Indeterminate.
  • Mainly used when you want to allow users to select multiple choices.

Example: 

<input type="checkbox"> HTML
<input type="checkbox"> CSS
<input type="checkbox"> JavaScript
Enter fullscreen mode Exit fullscreen mode

Conclusion

  • Use Radio Buttons for single selection.
  • Use Checkboxes for multiple selections.

References:
https://www.geeksforgeeks.org/html/radio-button-vs-checkbox-in-html/
https://byjus.com/gate/difference-between-radio-button-and-checkbox/
https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/

Top comments (1)

Collapse
 
kamalesh_ar_6252544786997 profile image
Kamalesh AR •

Simple and very clear