Checkboxes & Radio Options
Toggle Selectors
Checkboxes allow multi-selects. Radio lists allow single choices:Imagine checkboxes as a checklist of hobbies: you can select as many options as you want, or choose none at all. Radio buttons are like a multiple-choice quiz: you can only select *one* option from the list. Selecting a new choice automatically deselects the old one.
In HTML:
<input type="checkbox">: Creates a square toggle box.<input type="radio">: Creates a circular toggle. To make radio buttons exclusive (so selecting one unselects the others), they must all share the exact same name attribute.Why does it matter?
Checkboxes and radio buttons let users toggle settings or choose options quickly. Grouping radio buttons with thename attribute is critical to ensure the browser handles selection exclusivity correctly.
How to write it
<input type="radio" name="color" id="red">
<input type="radio" name="color" id="blue">
Checkbox
Radio
Common Mistakes
name on radio buttons: If you have two radio buttons but forget to give them the same name attribute (e.g., name="color"), you will be able to select both at the same time, which defeats the purpose of radio buttons!Quick Reference
<input type="checkbox"> — Multi-select checkbox.<input type="radio" name="group"> — Single-select choice in a group.Your Task
Create two radio inputs. Set both of their `name` attributes to 'color', and set their `id` attributes to 'red' and 'blue' respectively.
index.html
Type code above to start the lesson.
Live Preview