Skip to content
staticview

Toggle Checkbox Examples

The examples below assume that you have imported the component and set up the theme.

Basic

The checkbox toggles on click or Space. It is form-associated, so a label with for targets it like any input.

<div class="checkbox-basic">
  <sv-toggle-checkbox id="newsletter-checkbox"></sv-toggle-checkbox>
  <label for="newsletter-checkbox">Subscribe to the newsletter</label>
</div>


<style>
  .checkbox-basic {
    display: flex;
    gap: 0.5em;
    align-items: center;
    justify-content: center;
    padding-block: 1em;


    label {
      cursor: pointer;
    }
  }
</style>

Checked and Disabled

checked turns the checkbox on from markup, and disabled blocks interaction in either state.

<div class="checkbox-states">
  <label class="row">
    <sv-toggle-checkbox checked></sv-toggle-checkbox>
    Normal
  </label>


  <label class="row">
    <sv-toggle-checkbox disabled></sv-toggle-checkbox>
    Disabled
  </label>


  <label class="row">
    <sv-toggle-checkbox checked disabled></sv-toggle-checkbox>
    Disabled checked
  </label>
</div>


<style>
  .checkbox-states {
    display: grid;
    gap: 0.75em;
    max-inline-size: 16rem;
    padding-block: 1em;
    margin-inline: auto;


    .row {
      display: flex;
      gap: 0.5em;
      align-items: center;
      cursor: pointer;
    }
  }
</style>

Select All

controls takes the IDs of the checkboxes this one governs. Toggling it checks or unchecks them all, and it turns indeterminate on its own when only some of them are checked.

Sandwich condiments 
<fieldset class="checkbox-group">
  <legend>Sandwich condiments</legend>


  <label class="row">
    <sv-toggle-checkbox controls="condiment-lettuce condiment-tomato condiment-mustard condiment-sprouts"></sv-toggle-checkbox>
    All condiments
  </label>


  <ul class="options">
    <li>
      <label class="row">
        <sv-toggle-checkbox id="condiment-lettuce"></sv-toggle-checkbox>
        Lettuce
      </label>
    </li>


    <li>
      <label class="row">
        <sv-toggle-checkbox id="condiment-tomato" checked></sv-toggle-checkbox>
        Tomato
      </label>
    </li>


    <li>
      <label class="row">
        <sv-toggle-checkbox id="condiment-mustard"></sv-toggle-checkbox>
        Mustard
      </label>
    </li>


    <li>
      <label class="row">
        <sv-toggle-checkbox id="condiment-sprouts"></sv-toggle-checkbox>
        Sprouts
      </label>
    </li>
  </ul>
</fieldset>


<style>
  .checkbox-group {
    max-inline-size: 16rem;
    padding: 0.5em 0 0;
    margin-inline: auto;
    border: none;


    .row {
      display: flex;
      gap: 0.5em;
      align-items: center;
      cursor: pointer;
    }


    .options {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      padding-inline-start: 1.5em;
      margin: 0;
      margin-block-start: 0.5em;
      list-style: none;
    }
  }
</style>

Icons

The checked-icon, unchecked-icon, and mixed-icon slots replace the built-in check and dash with any markup. The unchecked box is empty by default, so slotting unchecked-icon is the only way to show something in it.

unchecked-icon
checked-icon
mixed-icon 
<div class="checkbox-icons">
  <div class="variant">
    <sv-toggle-checkbox aria-label="Cross when unchecked">
      <!-- Cross -->
      <svg aria-hidden="true" slot="unchecked-icon" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path d="m336-280-56-56 144-144-144-143 56-56 144 144 143-144 56 56-144 143 144 144-56 56-143-144-144 144Z"></path>
      </svg>
    </sv-toggle-checkbox>
    <span>unchecked-icon</span>
  </div>


  <div class="variant">
    <sv-toggle-checkbox aria-label="Heart when checked">
      <!-- Heart -->
      <svg class="heart" aria-hidden="true" slot="checked-icon" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
        <path
          d="m480-120-58-52q-101-91-167-157T150-447.5Q111-500 95.5-544T80-634q0-94 63-157t157-63q52 0 99 22t81 62q34-40 81-62t99-22q94 0 157 63t63 157q0 46-15.5 90T810-447.5Q771-395 705-329T538-172l-58 52Z"
        ></path>
      </svg>
    </sv-toggle-checkbox>
    <span>checked-icon</span>
  </div>


  <div class="variant">
    <div class="group">
      <label>
        <sv-toggle-checkbox controls="icons-option-1 icons-option-2">
          <!-- Dot -->
          <svg aria-hidden="true" slot="mixed-icon" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg">
            <path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Z"></path>
          </svg>
        </sv-toggle-checkbox>
        All formats
      </label>


      <label>
        <sv-toggle-checkbox id="icons-option-1" checked></sv-toggle-checkbox>
        PNG
      </label>


      <label>
        <sv-toggle-checkbox id="icons-option-2"></sv-toggle-checkbox>
        JPEG
      </label>
    </div>


    <span>mixed-icon</span>
  </div>
</div>


<style>
  .checkbox-icons {
    display: grid;
    gap: 1.5em;
    justify-items: center;
    padding-block: 1em;


    .variant {
      display: grid;
      gap: 0.4em;
      justify-items: center;


      span {
        font-size: 0.8em;
        color: var(--sv-gray-3);
      }
    }


    .heart {
      box-sizing: border-box;
      padding: 0.2em;
    }


    .group {
      display: grid;
      gap: 0.5em;
      justify-items: start;


      label {
        display: flex;
        gap: 0.5em;
        align-items: center;
        cursor: pointer;


        &:not(:first-child) {
          padding-inline-start: 1.25em;
        }
      }
    }
  }
</style>

Styling

--sv-toggle-checkbox-sz scales the whole checkbox, the color tokens tint it, and the border radius takes it from a square to a circle.

--sv-toggle-checkbox-sz
--sv-toggle-checkbox-active-bg
--sv-toggle-checkbox-bdr-rad 
<div class="checkbox-styling">
  <div class="variant">
    <sv-toggle-checkbox class="large" aria-label="Large checkbox" checked></sv-toggle-checkbox>
    <span>--sv-toggle-checkbox-sz</span>
  </div>


  <div class="variant">
    <sv-toggle-checkbox class="tinted" aria-label="Green checkbox" checked></sv-toggle-checkbox>
    <span>--sv-toggle-checkbox-active-bg</span>
  </div>


  <div class="variant">
    <sv-toggle-checkbox class="rounded" aria-label="Rounded checkbox" checked></sv-toggle-checkbox>
    <span>--sv-toggle-checkbox-bdr-rad</span>
  </div>
</div>


<style>
  .checkbox-styling {
    display: grid;
    gap: 1.5em;
    justify-items: center;
    padding-block: 1em;


    .variant {
      display: grid;
      gap: 0.4em;
      justify-items: center;


      span {
        font-size: 0.8em;
        color: var(--sv-gray-3);
      }
    }


    .large {
      --sv-toggle-checkbox-sz: 2.2em;
    }


    .tinted {
      --sv-toggle-checkbox-active-bg: #22c55e;
    }


    .rounded {
      --sv-toggle-checkbox-sz: 2.2em;
      --sv-toggle-checkbox-bdr-rad: 50%;
    }
  }
</style>

Animation

--sv-toggle-checkbox-dur and --sv-toggle-checkbox-ease reshape the fill, the icon swap, and the press scale together. The default easing is springy; a zero duration makes the checkbox instant. The reduced motion fallback wins over both.

Reduced Motion

Your system is set to reduce motion, so this animation will not play for you.

--sv-toggle-checkbox-dur: 800ms
--sv-toggle-checkbox-ease: ease
--sv-toggle-checkbox-dur: 0s 
<div class="checkbox-animation">
  <div class="variant">
    <sv-toggle-checkbox class="slow" aria-label="Slow checkbox"></sv-toggle-checkbox>
    <span>--sv-toggle-checkbox-dur: 800ms</span>
  </div>


  <div class="variant">
    <sv-toggle-checkbox class="smooth" aria-label="Smooth checkbox"></sv-toggle-checkbox>
    <span>--sv-toggle-checkbox-ease: ease</span>
  </div>


  <div class="variant">
    <sv-toggle-checkbox class="instant" aria-label="Instant checkbox"></sv-toggle-checkbox>
    <span>--sv-toggle-checkbox-dur: 0s</span>
  </div>
</div>


<style>
  .checkbox-animation {
    display: grid;
    gap: 1.5em;
    justify-items: center;
    padding-block: 1em;


    .variant {
      display: grid;
      gap: 0.4em;
      justify-items: center;


      span {
        font-size: 0.8em;
        color: var(--sv-gray-3);
      }
    }


    .slow {
      --sv-toggle-checkbox-dur: 800ms;
    }


    .smooth {
      --sv-toggle-checkbox-ease: ease;
    }


    .instant {
      --sv-toggle-checkbox-dur: 0s;
    }
  }
</style>