HTML Radio Button — Working Code and Common Patterns

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <fieldset>
    <legend>How did you hear about us?</legend>

    <label>
      <input type="radio" name="source" value="search" required />
      Search engine
    </label>

    <label>
      <input type="radio" name="source" value="social" />
      Social media
    </label>

    <label>
      <input type="radio" name="source" value="friend" />
      Word of mouth
    </label>

    <label>
      <input type="radio" name="source" value="other" />
      Other
    </label>
  </fieldset>

  <label>Email<input name="email" type="email" required /></label>
  <button type="submit">Send</button>
</form>

An HTML radio button is `<input type="radio">`. By itself, one radio is a useless checkbox alternative — radios become useful when grouped. Group radios by giving multiple `<input type="radio">` elements the same `name` attribute. The browser enforces single selection across the group: clicking one deselects the others.

Wrap radio groups in a `<fieldset>` with a `<legend>` for accessibility. The fieldset semantically groups related inputs, and screen readers announce the legend when the user focuses any radio inside. This is the difference between an accessible radio group and a confusing list of unlabeled choices.

Each radio needs a `value` attribute — that's what gets submitted with the form. The value is what your backend receives; the visible label text (next to the radio) is just for the user. Avoid relying on `checked` for the default — if you need a default selected option, set `checked` on the appropriate radio in HTML. If no radio is `checked` initially and the group is `required`, the form won't submit until the user picks one.

Common gotcha: forgetting the `name` attribute. A radio without a name is selectable but the user can pick multiple at once (because the browser has no group to enforce uniqueness against). Always give all radios in a group the same name — that's what makes them mutually exclusive.

Same name attribute = mutually exclusive group. That's the whole trick.