12 #Radio Radio

A radio button is a UI element that allows users to switch between two options(checked or uncheck).

Note: The <label> must appear after the <input type="radio" class="radio"> due to the lack of parent selectors in CSS.

Example

Default radio group

Select a maintenance drone:

Huey

Dewey

Louie

Disabled radio button

Radio Button: Disabled radio

Markup

<h2>Default radio group</h2>
<p>Select a maintenance drone:</p>
<div>
  <input type="radio" id="huey" name="drone" value="huey" checked class="radio">
  <label for="huey">Huey</label>
</div>
<div>
  <input type="radio" id="dewey" name="drone" value="dewey" class="radio">
  <label for="dewey">Dewey</label>
</div>
<div>
  <input type="radio" id="louie" name="drone" value="louie" class="radio">
  <label for="louie">Louie</label>
</div>
<h2>Disabled radio button</h2>
Radio Button: <input type="radio" id="myRadio" disabled class="radio"><label for="myRadio">Disabled radio</label>

Source: radio.css, line 1