GitHub

Toggle Group

PreviousNext

Toggles that select one or several items, as a ListBox with the toggle-group class.

Partial
InteractiveToggle Group demo
<ListBox Classes="toggle-group" SelectionMode="Multiple,Toggle" HorizontalAlignment="Left">
  <ListBoxItem Content="Bold" />
  <ListBoxItem Content="Italic" IsSelected="True" />
  <ListBoxItem Content="Underline" />
</ListBox>

Usage

ListBox Classes="toggle-group" lays its ListBoxItems out in a row, 8px apart, and draws each as a toggle: ghost by default, selected and hovered items in the accent. The selection rule is the app's SelectionMode: Multiple,Toggle lets every item flip on its own, which is GPUI Kit's group; Toggle (or Single) keeps at most one item selected. IsSelected on an item, or SelectedItems on the list, is the state. A group holds a handful of items, so the list does not virtualize.

ClassEffect
outlineA 1px border and the background on every item (ghost is the default)
segmentedJoins the items: only the outer corners are rounded and neighbours share one edge
xsmall, small, largeItem height 20, 24 and 36; medium, the default, is 32. An icon takes the text size

Examples

Ghost and outlined, loose and segmented. The segmented groups use SelectionMode="Toggle", so one item is selected at a time and clicking it again clears the selection.

Variants
InteractiveToggle Group demo: Variants
<WrapPanel ItemSpacing="16" LineSpacing="12">
  <ListBox Classes="toggle-group" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group segmented" SelectionMode="Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline segmented" SelectionMode="Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
</WrapPanel>

The four sizes of an outlined group.

Sizes
InteractiveToggle Group demo: Sizes
<WrapPanel ItemSpacing="16" LineSpacing="12">
  <ListBox Classes="toggle-group outline xsmall" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline small" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
  <ListBox Classes="toggle-group outline large" SelectionMode="Multiple,Toggle">
    <ListBoxItem Content="Bold" />
    <ListBoxItem Content="Italic" IsSelected="True" />
    <ListBoxItem Content="Underline" />
  </ListBox>
</WrapPanel>

A PathIcon as an item's content; the icon follows the group's size.

Icons
InteractiveToggle Group demo: Icons
<WrapPanel ItemSpacing="16" LineSpacing="12">
  <ListBox Classes="toggle-group" SelectionMode="Multiple,Toggle">
    <ListBoxItem IsSelected="True">
      <PathIcon Data="{StaticResource Gpui.Icon.Eye}" />
    </ListBoxItem>
    <ListBoxItem>
      <PathIcon Data="{StaticResource Gpui.Icon.Star}" />
    </ListBoxItem>
    <ListBoxItem>
      <PathIcon Data="{StaticResource Gpui.Icon.Bell}" />
    </ListBoxItem>
  </ListBox>
  <ListBox Classes="toggle-group outline segmented" SelectionMode="Toggle">
    <ListBoxItem IsSelected="True">
      <PathIcon Data="{StaticResource Gpui.Icon.PanelLeftOpen}" />
    </ListBoxItem>
    <ListBoxItem>
      <PathIcon Data="{StaticResource Gpui.Icon.PanelLeftClose}" />
    </ListBoxItem>
  </ListBox>
</WrapPanel>

Not covered

  • GPUI Kit's selection rules: the app sets SelectionMode.