Checkboxes and Radio Buttons
Let users pick one or many options.
Syntax
<input type="radio" name="size" value="s">Two input types let users choose from options.
- Checkboxes (
type="checkbox") let users select zero or more options. - Radio buttons (
type="radio") let users select only one option from a group.
Radio buttons in the same group must share the same name.
Example
Loading editor…
Press Run to see the result.
When to use it
- A sign-up form uses a single checkbox for the "I agree to terms" consent requirement.
- A survey question uses radio buttons so users can select only one answer from a list of choices.
- A product filter sidebar uses checkboxes so users can select multiple color or size options simultaneously.
More examples
Single checkbox for agreement
A standalone checkbox captures a binary yes/no; required blocks form submission until it is checked.
<label>
<input type="checkbox" name="terms" value="agreed" required>
I agree to the <a href="/terms">Terms of Service</a>
</label>Radio button group single choice
Radios with the same name form a group; checked marks the default; only one can be selected at a time.
<fieldset>
<legend>Subscription plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro" checked> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>Multiple checkboxes for multi-select
Multiple checkboxes with the same name send each checked value independently, allowing multi-selection.
<fieldset>
<legend>Notify me about</legend>
<label><input type="checkbox" name="notify" value="news"> News</label>
<label><input type="checkbox" name="notify" value="offers"> Special offers</label>
<label><input type="checkbox" name="notify" value="updates"> Product updates</label>
</fieldset>
Discussion