Skip to content
staticview

Toggle Group Examples

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

Basic

Nest sv-toggle buttons as direct children, each with its own value. The group's space-separated value attribute decides which ones start pressed.

Bold Italic Underline 
<div class="group-basic">
  <sv-toggle-group aria-label="Text formatting" value="bold italic">
    <sv-toggle value="bold">Bold</sv-toggle>
    <sv-toggle value="italic">Italic</sv-toggle>
    <sv-toggle value="underline">Underline</sv-toggle>
  </sv-toggle-group>
</div>


<style>
  .group-basic {
    display: flex;
    justify-content: center;
    padding-block: 1em;


    sv-toggle-group {
      gap: 0.5rem;
    }
  }
</style>

Exclusive

exclusive allows at most one pressed toggle button, and clicking the pressed one releases it.

Left Center Right 
<div class="group-exclusive">
  <sv-toggle-group aria-label="Text alignment" exclusive value="center">
    <sv-toggle value="left">Left</sv-toggle>
    <sv-toggle value="center">Center</sv-toggle>
    <sv-toggle value="right">Right</sv-toggle>
  </sv-toggle-group>
</div>


<style>
  .group-exclusive {
    display: flex;
    justify-content: center;
    padding-block: 1em;


    sv-toggle-group {
      gap: 0.5rem;
    }
  }
</style>

Disabled

disabled on the group blocks interaction with every toggle button in it.

Bold Italic Underline 
<div class="group-disabled">
  <sv-toggle-group aria-label="Text formatting" disabled value="italic">
    <sv-toggle value="bold">Bold</sv-toggle>
    <sv-toggle value="italic">Italic</sv-toggle>
    <sv-toggle value="underline">Underline</sv-toggle>
  </sv-toggle-group>
</div>


<style>
  .group-disabled {
    display: flex;
    justify-content: center;
    padding-block: 1em;


    sv-toggle-group {
      gap: 0.5rem;
    }
  }
</style>

Toolbar

A group that acts as a bar of controls takes role="toolbar", plus aria-orientation="vertical" when its toggle buttons are stacked.

Bold Italic Code role="toolbar"
Pen Brush Eraser aria-orientation="vertical" 
<div class="group-toolbar">
  <div class="variant">
    <sv-toggle-group aria-label="Text formatting" role="toolbar" value="bold">
      <sv-toggle value="bold">Bold</sv-toggle>
      <sv-toggle value="italic">Italic</sv-toggle>
      <span class="divider" aria-hidden="true"></span>
      <sv-toggle value="code">Code</sv-toggle>
    </sv-toggle-group>
    <span>role="toolbar"</span>
  </div>


  <div class="variant">
    <sv-toggle-group class="vertical" aria-label="Drawing tools" aria-orientation="vertical" exclusive role="toolbar" value="pen">
      <sv-toggle value="pen">Pen</sv-toggle>
      <sv-toggle value="brush">Brush</sv-toggle>
      <sv-toggle value="eraser">Eraser</sv-toggle>
    </sv-toggle-group>
    <span>aria-orientation="vertical"</span>
  </div>
</div>


<style>
  .group-toolbar {
    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);
      }
    }


    sv-toggle-group {
      gap: 0.5rem;
    }


    .divider {
      inline-size: var(--sv-bdr-sz-sm);
      block-size: 1.2em;
      background-color: var(--sv-gray-5);
    }


    .vertical {
      flex-direction: column;
      align-items: stretch;
    }
  }
</style>

Focus

Two knobs adjust the keyboard behavior: no-loop-focus stops the arrows at the ends, and no-roving-focus hands every toggle button its own tab stop. Tab and arrow through each group to feel the difference.

Mon Tue Wed no-loop-focus
Mon Tue Wed no-roving-focus 
<div class="group-focus">
  <div class="variant">
    <sv-toggle-group aria-label="Weekdays with focus stopping at the ends" no-loop-focus>
      <sv-toggle value="mon">Mon</sv-toggle>
      <sv-toggle value="tue">Tue</sv-toggle>
      <sv-toggle value="wed">Wed</sv-toggle>
    </sv-toggle-group>
    <span>no-loop-focus</span>
  </div>


  <div class="variant">
    <sv-toggle-group aria-label="Weekdays with a tab stop per toggle button" no-roving-focus>
      <sv-toggle value="mon">Mon</sv-toggle>
      <sv-toggle value="tue">Tue</sv-toggle>
      <sv-toggle value="wed">Wed</sv-toggle>
    </sv-toggle-group>
    <span>no-roving-focus</span>
  </div>
</div>


<style>
  .group-focus {
    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);
      }
    }


    sv-toggle-group {
      flex-wrap: wrap;
      gap: 0.5rem;
      justify-content: center;
    }
  }
</style>