Design system Selectors

Checkbox

A multi-select control for independent choices: zero, one or several options may be submitted together.

.mk-check

Overview

A checkbox selects an independent option inside a multi-select set. Each answer can be true or false without changing its siblings, so a group may submit zero, one or several choices.

Select any that apply

Usage

  • Select zero or more independent optionsEach checkbox represents a separate answer, so selecting one does not clear another. The form may require a minimum only when the requirement is explicit.
  • Keep the complete set visibleUse checkboxes for a short group whose options benefit from scanning together. Use a multi-select dropdown when the set is too long for the page.
  • Record input for submissionA checkbox contributes a value to a form. Use Toggle when changing a binary setting should take effect immediately.

Anatomy

1 2
  1. 1Checkbox face. The 20px square holds the native checked state. Selected fills with the accent and draws the check.
  2. 2Option label. A positive statement of what selecting makes true. Face and text share one 44px label target.

Variants and states

StateSpecimenWhat changes
RestWhite square, strong hairline, no mark.
SelectedThe face fills with the accent and the native checked state carries the meaning.
HoverThe unselected border warms; geometry and label position do not move.
Keyboard focusThe standard camel focus ring sits on the face.
DisabledThe complete option dims and leaves the press order.

Do and don't

Select any that apply
Do

Use checkboxes when every option is independent and several answers may be selected.

Select one
Don't

Do not use independent checkboxes when selecting one answer must clear the others.

Copy

  • State the positive resultThe label says what selecting makes true; avoid a negation that reverses the checked meaning.
  • Keep options parallelSiblings use the same grammatical form and answer the legend directly.

Accessibility

  • Keep the native inputKeyboard interaction, form submission and checked semantics come from input type="checkbox".
  • Name the groupA fieldset and legend connect every option to the question it answers.
  • The complete row pressesInput and text share one label and the 44px touch floor.

When to reach for something else

  • Exactly one answerUse Radio button.
  • The setting applies immediatelyUse Toggle; a checkbox normally submits with its form.
  • The active filter can be removedUse Filter chip for the applied query itself.

Markup

<fieldset class="mk-choice-group">
  <legend class="mk-choice-legend">Select any that apply</legend>
  <label class="mk-check"><input type="checkbox" name="choice" value="one"> Option 1</label>
  <label class="mk-check"><input type="checkbox" name="choice" value="two"> Option 2</label>
</fieldset>