Interactive Controls

Checkbox and Radio Group

Choices Need Labels

A notification form groups independent and exclusive choices so each control has a visible label and a submitted value.

Program

Choice controls are easiest to use when the group has a legend and every input is wrapped in a label.

checkbox_radio_group.html
Visuals: captured from real browser rendering
<fieldset>
  <legend>Notifications</legend>
  <label><input type="checkbox" name="email" checked> Email</label>
  <label><input type="radio" name="frequency" value="daily" checked> Daily</label>
  <label><input type="radio" name="frequency" value="weekly"> Weekly</label>
</fieldset>

  1. Create a grouped choice area.

    An empty grouped form area appears.
    The fieldset groups related controls together.

  2. Name the choice group.

    The group displays a Notifications legend.
    The legend labels the whole control group.

  3. Add the Email checkbox.

    The group shows a checked Email checkbox.
    A checkbox models an independent on/off choice.

  4. Add the selected Daily radio.

    A selected Daily radio choice appears under Email.
    Radio buttons with the same name form one exclusive group.

  5. Add the alternate Weekly radio.

    Daily and Weekly choices are visible, with Daily selected.
    The second radio is an alternate value for the same frequency name.
fieldset A fieldset groups related form controls.
radio group Radio inputs with the same name represent one exclusive choice.