Forms & Inputs

Checkboxes & Radio Buttons

Multi-select and single-select choices.

1Choosing Options

Checkboxes let users pick any number. Radios let users pick exactly one — group them by sharing the same name attribute.

Example Code

css

<fieldset>
  <legend>Toppings</legend>
  <label><input type="checkbox" name="topping" value="cheese" /> Cheese</label>
  <label><input type="checkbox" name="topping" value="basil" /> Basil</label>
</fieldset>

<fieldset>
  <legend>Size</legend>
  <label><input type="radio" name="size" value="s" /> Small</label>
  <label><input type="radio" name="size" value="m" /> Medium</label>
  <label><input type="radio" name="size" value="l" /> Large</label>
</fieldset>

2Put the element in context

Checkboxes allow independent selections; radio buttons with a shared name represent one choice from a group. Each option needs a visible associated label. A group question is often best expressed through a fieldset and legend rather than an unrelated paragraph.

3Practice with a small page

Create independent service-interest checkboxes and a contact-method radio group. Test clicking the labels and moving with the keyboard. Give the radio options the same name and verify that only one can be selected at a time.

Finished reading?

Mark this topic as complete to track progress.

<input> Types

Next Topic

<label> Tag