See also: Checkbox group

LabelLabelLabelLabel

<!-- Checked -->
<label class="checkbox">
  <input name="checkbox" type="checkbox" />
  <span class="sr-only">Label</span>
</label>

<!-- Unchecked -->
<label class="checkbox">
  <input name="checkbox" type="checkbox" checked="checked" />
  <span class="sr-only">Label</span>
</label>


<!-- Unchecked & disabled -->
<label class="checkbox">
  <input name="checkbox" type="checkbox" disabled />
  <span class="sr-only">Label</span>
</label>

<!-- Checked & disabled -->
<label class="checkbox">
  <input name="checkbox" type="checkbox" checked="checked" disabled />
  <span class="sr-only">Label</span>
</label>

What's .sr-only?

The `.sr-only` (screen reader only) class removes the visible text but still allows screen readers to access it.

Check out more utils.

Visible label

Render the label text inside an element with a .text class.

Choice ADisabledChecked and disabledLong text dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole privacy policy ipsum

<label class="checkbox">
  <input name="checkbox" type="checkbox" checked="checked" />
  <span class="label">Label</span>
</label>

Label position

DefaultStack

<label class="checkbox stack">
  <input name="checkbox" type="checkbox">
  <span class="label">Stack</span>
</label>

Supporting text

DefaultSupporting textStackSupporting text

<label class="checkbox">
  <input name="checkbox" type="checkbox">
  <span class="label">Stack</span>
  <span class="supporting-text">Supporting text</span>
</label>

Validation

• Add [required] to the <input> element to toggle required styles
• The .error class toggles the error styles. Make use of the supporting text to give extra feedback on the error.

DefaultStack

DefaultCheck yourselfStackBefore you wreck yourself

<label class="checkbox">
  <input name="checkbox" type="checkbox" required>
  <span class="label">Label</span>
</label>

<label class="checkbox error">
  <input name="checkbox" type="checkbox">
  <span class="label">Label</span>
  <span class="supporting-text">Supporting text</span>
</label>

Sizes

LabelLabelLabel

SmallDefaultLarge

<label class="checkbox small">
  <!--  -->
</label>

<label class="checkbox large">
  <!--  -->
</label>

Field group

Legend

Checkbox 1Checkbox 2Checkbox 3

<fieldset class="field-group">
  <legend>Legend</legend>
  <div class="fields">
    <!--  -->
  </div>
</fieldset>

Direction

Legend

Checkbox 1Checkbox 2Checkbox 3

<fieldset class="field-group row">
  <!--  -->
</fieldset>

Supporting text

Can be placed above and below the fields.

Legend

Supporting text above fields

Checkbox 1Checkbox 2Checkbox 3

Legend

Checkbox 1Checkbox 2Checkbox 3

Supporting text below fields

<fieldset class="field-group row">
  <legend>Legend</legend>
  <span class="supporting-text">Supporting text</span>
  <div class="fields">
    <!--  -->
  </div>
</fieldset>

<fieldset class="field-group row">
  <legend>Legend</legend>
  <div class="fields">
    <!--  -->
  </div>
  <span class="supporting-text">Supporting text</span>
</fieldset>

Disabled

Attach the disabled attribute to the <fieldset> element.

Legend

Checkbox 1Checkbox 2Checkbox 3

<fieldset class="field-group row" disabled>
  <!--  -->
</fieldset>

Required

Attach the required attribute to at least one of your <input> elements.

These are required!

Checkbox 1Checkbox 2Checkbox 3

<fieldset class="field-group row">
  <legend>Legend</legend>
  <div class="fields">
    <label class="checkbox">
      <input type="checkbox" required />
      <span class="label">Checkbox 1</span>
    </label>
    <!--  -->
  </div>
</fieldset>

Validation

Attach the .error class to your fieldset.field-group element

Legend

Something went wrong!

Checkbox 1Checkbox 2Checkbox 3

<fieldset class="field-group row error">
  <!--  -->
</fieldset>

Accessibility

Labels

Accessible checkboxes must have a label. You can choose between three approaches:

Approach	Usage in Checkbox component
Provide a label text inside the label/role="checkbox" element	Default
Add a aria-label on the input element	Not used
Have a visible label that you reference with aria-labelledby	Not used

Keyboard support

Key	Function
Space	When Checkbox is focused it changes its state.
Enter	(Optional) When Checkbox is focused it changes its state.

API

Type	Modifiers	Default	Description
Children	.label, .supporting-text	-	Optional children.
Label position	.stack, default	default	If applied, the label is stacked under the element.
Sizes	.small, default, .large	default	The size of the element.
Validation	.error	-	When applied, error styles are shown.

Field group API

Type	Modifiers	Default	Description
Children	<legend>, .fields, .supporting-text, checkbox, radio, switch	-	Supported child elements.
Direction	column, .row	column	Decides which direction the inputs will be placed.
Disabled	[disabled]	-	When applied, disabled styles are shown.
Validation	.error	-	When applied, error styles are shown.

Installation

checkbox-radio.css

@layer components.base {
  label:where(.checkbox, .radio) {
    align-items: center;
    color: var(--text-color-1);
    cursor: pointer;
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;
    line-height: 1.5;
    transform: translateZ(0);
    user-select: none;

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Required dot */
    &:has([required]:not([type="checkbox"]:checked)) {
      .label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Label */
    .label {
      grid-column: 2;
      grid-row: 1;
      position: relative;
      padding-inline: 0 1ex;
    }

    /* Supporting text */
    .supporting-text {
      color: var(--text-color-2);
      font-size: var(--font-size-xs);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Stacked layout */
    &.stack {
      justify-items: center;
      grid-auto-columns: unset;

      .label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;

        /* Required dot */
        &:after {
          inset: 0 -0.25ex auto auto;
        }
      }

      .supporting-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Input */
    input {
      aspect-ratio: 1;
      block-size: 1.125rem;
      cursor: pointer;
      inline-size: 1.125rem;

      &:before {
        --highlight-size: 175%;
      }
    }

    /* Sizes */
    &.small {
      input {
        block-size: var(--size-3);
        inline-size: var(--size-3);
      }
    }

    &.large {
      input {
        block-size: var(--size-4);
        inline-size: var(--size-4);
      }
    }

    /* Validation */
    &.error {
      input[type="checkbox"] {
        accent-color: var(--color-9);

        & ~ :where(.label, .supporting-text) {
          color: var(--color-9);
        }
      }
    }

    /* Touch devices */
    @media (pointer: coarse) {
      input {
        block-size: var(--size-4);
        inline-size: var(--size-4);
      }
    }
  }
}

field-group.css

@layer components.has-deps {
  /* Common styling for checkbox, radio and switch groups */
  :where(fieldset.field-group) {
    border: 0;
    border-radius: 0;
    gap: 0;
    padding: 0;
    z-index: 1;

    legend {
      color: var(--text-color-2);
      padding: 0 1ex 0 0;
    }

    /* Disabled */
    &[disabled] {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Validation */
    &.error {
      legend,
      .supporting-text {
        color: var(--color-9);
      }
    }

    /* Required */
    &:has([required]) {
      &:not(:has(input:where([type="radio"], [type="checkbox"]):checked)) {
        legend {
          position: relative;

          &:after {
            color: var(--red);
            content: "*";
            inset: 0 -0.25ex auto auto;
            position: absolute;
          }
        }
      }
    }
    :where(.radio, .checkbox, .switch) .label:after {
      display: none;
    }

    /* Supporting text */
    .supporting-text {
      color: var(--text-color-2);
      font-size: var(--font-size-xs);
      line-height: 1.5;
      z-index: 1;
    }

    /* Fields */
    .fields {
      display: flex;
      flex-direction: column;
      gap: var(--size-2);

      * ~ & {
        padding: var(--size-2) 0;
      }
    }

    :last-child {
      padding-block-end: 0;
    }

    /* Directions */
    &.row {
      .fields {
        flex-direction: row;
      }
    }
  }
}