HTML - Radio

About

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

Example

Input

radio as a type of input element.

The HTML - Input Element attribute groups the set of radio input

  • A serie of radio input with the same name (ie choice) and different value
<p>Select a radio </p>
<p><input type="radio" name="choice" id="choice1id" value="choice1" onchange="handleChange(event);"><label for="choice1id">choice 1</label></p>
<p><input type="radio" name="choice" id="choice2id" value="choice2" onchange="handleChange(event);"><label for="choice2id">choice 2 </label></p>
let handleChange = (event) => {
   console.log("The input radio button chosen has the value "+event.target.value);
}

Aria, css and javascript

Programmatically with aria role, css and javascript

<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>
</div>

See the below example Source

  • the visuals for the radio buttons

Management

Key

  • Up Arrow and Down Arrow keys move focus and selection

Documentation / Reference


Powered by ComboStrap