<input type=radio>: exclusive choice

Radio = exactly one choice from a group

<input type="radio" id="m" name="plan" value="monthly" />
<label for="m">$9/mo</label>

<input type="radio" id="y" name="plan" value="yearly" checked />
<label for="y">$90/yr (save 17%)</label>

• All radios with the same name are mutually exclusive — clicking one unchecks the others.
• value is what gets submitted (plan=yearly). Text is what the user reads.
• checked on one of them is the default.

When to use radio vs select

Plan picker, gender, size (S/M/L), payment method — radio. Country, year, language — select.

Layout

Radios are inline by default. For a vertical stack:

label { display: block; padding: 4px 0; }

For "card-style" radios (where the whole card is clickable), put the radio inside the label:

<label>
  <input type="radio" name="plan" value="yearly" />
  <strong>Yearly</strong>
  <p>$90/year — save 17%</p>
</label>