Toggle Switch Settings List

A settings card built from rows of label, description, and switch. The master switch drives the disabled state of the rows below it through the clicked event, which fires before the state flips and carries the upcoming state in detail.checked.

Notifications Allow the app to send any notifications

Mentions When someone mentions you in a thread

Weekly digest A summary of your workspace every Monday

Code

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

<div class="settings-list">
23 collapsed lines
  <div class="row">
    <div class="text">
      <label for="master-switch">Notifications</label>
      <small>Allow the app to send any notifications</small>
    </div>
    <sv-toggle-switch id="master-switch" checked></sv-toggle-switch>
  </div>

  <div class="row">
    <div class="text">
      <label for="mentions-switch">Mentions</label>
      <small>When someone mentions you in a thread</small>
    </div>
    <sv-toggle-switch id="mentions-switch" checked></sv-toggle-switch>
  </div>

  <div class="row">
    <div class="text">
      <label for="digest-switch">Weekly digest</label>
      <small>A summary of your workspace every Monday</small>
    </div>
    <sv-toggle-switch id="digest-switch"></sv-toggle-switch>
  </div>
</div>

<script type="application/x-typescript" module>
10 collapsed lines
  const master = document.querySelector<ToggleSwitch>("#master-switch")!;
  const dependents = document.querySelectorAll<ToggleSwitch>(".settings-list sv-toggle-switch:not(#master-switch)");

  master.addEventListener("clicked", event => {
    const willBeChecked = event.detail.checked;

    for (const dependent of dependents) {
      dependent.disabled = !willBeChecked;
    }
  });
</script>

<style>
33 collapsed lines
  .settings-list {
    max-inline-size: 24rem;
    margin-inline: auto;
    background-color: var(--sv-gray-7);
    border: 1px solid var(--sv-gray-5);
    border-radius: var(--sv-bdr-rad-lg);

    .row {
      display: flex;
      gap: 1em;
      align-items: center;
      padding: 0.85em 1em;

      &:not(:last-child) {
        border-block-end: 1px solid var(--sv-gray-5);
      }

      .text {
        display: grid;
        flex: 1;
        gap: 0.15em;

        label {
          font-weight: 600;
          cursor: pointer;
        }

        small {
          color: var(--sv-gray-3);
        }
      }
    }
  }
</style>