Skip to content
staticview

Toggle Checkbox Basic

Use controls to link an aggregate checkbox to its options.




Sandwich Condiments

Code

The following example assumes that you have imported the component and set up the theme.

Basic Toggle Checkbox
<div style="max-inline-size: 300px">
  <div class="check-box-container">
    <sv-toggle-checkbox id="normal-checkbox" checked></sv-toggle-checkbox>
    <label for="normal-checkbox">Normal</label>
  </div>


  <br />


  <div class="check-box-container">
    <sv-toggle-checkbox id="checked-disabled" checked disabled></sv-toggle-checkbox>
    <label for="checked-disabled">Disabled</label>
  </div>


  <br />


  <div class="check-box-container">
    <sv-toggle-checkbox id="unchecked-disabled" disabled></sv-toggle-checkbox>
    <label for="unchecked-disabled">Disabled</label>
  </div>


  <br />


  <fieldset class="check-box-fieldset">
    <legend>Sandwich Condiments</legend>


    <label class="check-box-container">
      <sv-toggle-checkbox controls="option-1 option-2 option-3 option-4 option-5"></sv-toggle-checkbox>
      All condiments
    </label>


    <ul class="check-box-list">
      <li>
        <label class="check-box-container">
          <sv-toggle-checkbox id="option-1"></sv-toggle-checkbox>
          Lettuce
        </label>
      </li>


      <li>
        <label class="check-box-container">
          <sv-toggle-checkbox id="option-2" checked></sv-toggle-checkbox>
          Tomato
        </label>
      </li>


      <li>
        <label class="check-box-container">
          <sv-toggle-checkbox id="option-4"></sv-toggle-checkbox>
          Mustard
        </label>
      </li>


      <li>
        <label class="check-box-container">
          <sv-toggle-checkbox id="option-5"></sv-toggle-checkbox>
          Sprouts
        </label>
      </li>
    </ul>
  </fieldset>
</div>


<style>
24 collapsed lines
  .check-box-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }


  .check-box-fieldset {
    padding: 0.5em 0 0;
    border: none;


    .check-box-container {
      padding-inline-start: 0.5em;
    }


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