Usage of radio vs checkbox button elements in HTML

Anna Ikoki
3 min readJan 25, 2022

I just encountered an ahtml code which used radio as checkbox, and decided to run the different scenarios when we interchange radio/checkbox usage.

First we define and meaningify* the attributes radio and checkbox for form tag in html.

Radio and checkbox are input elements used in html form tag.

Radio is used when you want to exclusively have no option or ONE option and NOT other(s), eg operating system you wish to download? android or iOS.

Checkbox is when you can choose no option, one option or MORE than one option. eg phone that you ever used : Samsung or/and iPhone

The value for the name attribute must be IDENTICAL for all radio buttons

The type attribute must be radio for radio use, and checkbox for checkbox use.

It doesn’t serve anything to allow the form to be submitted without any of the radio/checkbox buttons selected, so it is usually wise to have one default to the checked state.

However, with checkboxes, the selected option can be switched on and off, but can’t do so for radio. In radio, once an option is selected, can only be dis-selected by choosing another, but can’t be turned off. This makes it a sensible option for a checkbox to have no checked state, and important…

--

--

No responses yet