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.
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.
<!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.
<!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. |