Choice Styles

Style checkboxes, radios, and switches without replacing native controls.

Inline choices keep a shared name

A switch is still a checkbox

Use a real checkbox. CSS changes the appearance with :checked. Disabled switches must stay keyboard-focusable only when they are not disabled.

What to remember

Inline layouts use flex wrap; keep tap targets comfortable.
Disabled choices need a visible reason in the label text when possible.
Do not rebuild switches with empty divs and click handlers in this chapter.

Important HTML

A switch is a labelled checkbox. Presentation comes from CSS classes.

<div class="switch-row">
  <input class="switch-input" id="notify-email" name="emailNotify"
    type="checkbox" value="yes">
  <label class="switch-label" for="notify-email">Email game reminders</label>
</div>