HTML - Radio


A radio represents a serie of mutually-exclusive choices in a form.

It is an input element of type radio.

Html Radio Illustration

A radio is round to distinguish from the square checkbox.



As the checkbox, the state of the radio buttons is managed by the boolean value of the checked attribute.

    <p>Pizza crust:</p>
        <input type="radio" name="choice" value="regular" >
        <label for="choice1id">Regular crust</label>
    <input type="radio" name="choice" value="deep" checked >
    <label for="choice2id">Deep dish</label>
let formData = new FormData(document.querySelector("form"));
console.log(`The actual value is: ${formData.get("choice")}`);

If no input element is checked, the control is not complete and no key/value will be send on submit.


A radio modification can be captured with the change event


  • A serie of radio input with the same name (ie choice) and different value
<p>Pizza crust:</p>
    <input type="radio" name="choice" value="regular" onchange="return handleChange(this);">
    <label for="choice1id">Regular crust</label>
    <input type="radio" name="choice" value="deep" onchange="return handleChange(this);" checked>
    <label for="choice2id">Deep dish</label>
    <input type="radio" name="choice" value="thin" onchange="return handleChange(this);">
    <label for="choice2id">Thin crust</label>
let handleChange = (element) => {
   console.log("The pizza crust chosen is "+element.value);

Styling / CSS

  • To style the below radio buttons:
<input type="radio"  name="color" value="blue" checked/>
<input type="radio"  name="color" value="red"/>
input[type="radio"] {
  appearance: none;
  • Then make you own.
  • Styling for Checked or unchecked radio
input[type="radio"] {
  width: 2rem;
  height: 2rem;
  border-radius: 2em;
  border: 1px solid rgba(0,0,0,.25);
  background-color: #20c997;
  border-color: #20c997;
input[type="radio"]:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3e%3c/svg%3e");
  • Output:


Programmatic example for aria role, css and javascript1). Just try the code to see it entirely.

<div role="radiogroup" aria-labelledby="gdesc1">
  <h3>Pizza Crust</h3>
  <div role="radio" aria-checked="false" tabindex="0">Regular crust</div>
  <div role="radio" aria-checked="false" tabindex="-1">Deep dish</div>
  <div role="radio" aria-checked="false" tabindex="-1">Thin crust</div>
  • the visuals for the radio buttons


Because a radio is an input element, it's focusable meaning that the arrow keys (up down, left, right) change the selection.

Documentation / Reference

Discover More
CSS - User Agent Style Sheet

A user agent delivers a default Style Sheet. Every browser provides a default set of styles also known as user agent styles. The provided style simply override the browser defaults to get the same...
Devtool Chrome Event Listener
Change event (DOM, Javascript)

A page and example about the change event
HTML - Checked

checked is an HTML attribute that indicates via its value (true or false - default to true) if the form control element is checked. It's used: in a checkbox or radio button select optionselected...
Html Checkbox Illustration
How to create and use a HTML checkbox ?

This article gives you all the important information about HTML checkbox and how to use them
Formdata Browser Devtool
How to use FormData and send multipart-data in the Browser (Web API )?

FormData is a web api object that represent the data of a form that should be send if the form is submited. Therefore if you have a checkbox that is not checked, formdata will not collect it. You can...
What are Form Control elements in HTML ?

control form elements are elements that are used specifically inside a form. They are used: to specify a key and a value. to layout the form to submit it or reset it field set [optional]...
What are HTML Input Elements?

An inputinput element of a form control that permits to define a scalar value (single value) inputFull list Ref Doc The type attribute defined: the default behavior the design of the element....

Share this page:
Follow us:
Task Runner