UI Component Lab 日本語

← All components

Input

Checkbox

A small box the user checks or unchecks; any number of options in a group can be checked.

Toppings

How to recognize it

A small square next to a label. A checked box shows a check mark; a partly checked parent shows a dash.

Behavior

  • Clicking the box or its label toggles the check.
  • A parent checkbox can show a mixed state when only some of its children are checked; checking it checks them all.
  • Related checkboxes are grouped with a fieldset and legend so the group has a name.

Keyboard

KeyAction
TabMoves between checkboxes.
SpaceChecks or unchecks the focused box.

Usage notes

  • Use it for choosing several options, or for a single on/off choice.
  • Put the box to the left of its label.
  • Radio: Checkboxes allow any number of choices; radio buttons allow exactly one.
  • Switch: A checkbox is often confirmed later with a submit button; a switch takes effect right away.

Sources