HTML Checkbox & Radio Buttons

HTML checkboxes and radio buttons allow users to make selections from a list of options. They are commonly used in forms for user preferences, surveys, and questionnaires.

Checkbox

A checkbox allows users to select one or more options independently. Use the same name if multiple selections belong to the same group.


<form>
  <label>
    <input type="checkbox" name="hobby" value="reading"> Reading
  </label><br>
  <label>
    <input type="checkbox" name="hobby" value="music"> Music
  </label><br>
  <label>
    <input type="checkbox" name="hobby" value="travel"> Travel
  </label>
</form>

Radio Buttons

Radio buttons allow users to select only one option from a group. All radio inputs in the same group must share the same name.


<form>
  <label>
    <input type="radio" name="gender" value="male"> Male
  </label><br>
  <label>
    <input type="radio" name="gender" value="female"> Female
  </label><br>
  <label>
    <input type="radio" name="gender" value="other"> Other
  </label>
</form>

Tips for Checkboxes & Radios

Always group related options using fieldset and legend for better accessibility.
Wrap input elements with <label> for a better clickable experience.
Ensure each option has a value attribute for form data processing.

← Previous: Labels & Placeholders Next: Select & Textarea →