Skip to content
staticview

Toggle Group Basic

Group sv-toggle buttons as direct children of sv-toggle-group. Use exclusive to allow at most one pressed button at a time, disabled to disable the whole group, and the space-separated value attribute to set the initially pressed values.

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

MultipleBoldItalicUnderline
ExclusiveLeftCenterRight
DisabledBoldItalicUnderline
Vertical toolbarPenBrushEraser

Code

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

Toggle Group
<div class="toggle-group-container">
  <!-- Multiple pressed buttons -->
  <div class="group-column">
    <span id="format-label">Multiple</span>
    <sv-toggle-group aria-labelledby="format-label" 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>


  <!-- At most one pressed button -->
  <div class="group-column">
    <span id="alignment-label">Exclusive</span>
    <sv-toggle-group aria-labelledby="alignment-label" 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>


  <!-- Disabled -->
  <div class="group-column">
    <span id="disabled-label">Disabled</span>
    <sv-toggle-group aria-labelledby="disabled-label" 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>


  <!-- Stacked bar of controls -->
  <div class="group-column">
    <span id="tools-label">Vertical toolbar</span>
    <sv-toggle-group role="toolbar" aria-orientation="vertical" aria-labelledby="tools-label" exclusive 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>
  </div>
</div>


<style>
  .toggle-group-container {
3 collapsed lines
    display: grid;
    gap: 2em;
    justify-content: center;
  }


  .group-column {
3 collapsed lines
    display: flex;
    flex-direction: column;
    gap: 0.5rem;


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


  sv-toggle-group[aria-orientation="vertical"] {
2 collapsed lines
    flex-direction: column;
    align-items: stretch;
  }
</style>