Segmented Controls

SegmentedControl is a compact control used to present a small set of mutually exclusive options. It’s commonly used for toggles like view modes, filters, or color schemes where only one option should be active at a time.

Conceptually, it works the same way as segmented controls in native UI frameworks: a horizontal group of buttons where selecting one deselects the others.

Creating a Segmented Control

A segmented control is created by providing a collection of buttons:

SegmentedControl {
   InlineForEach(ColorScheme.allCases) { scheme in
      Button(
         scheme.name,
         action: .switchColorScheme(scheme)
      )
   }
}

You can mark one segment as selected by default using defaultSelection():

SegmentedControl {
   Button("General") {
       ShowElement("general")
       HideElement("advanced", "info")
   }

   Button("Advanced") {
       ShowElement("advanced")
       HideElement("general", "info")
   }

   Button("Info") {
       ShowElement("info")
       HideElement("general", "advanced")
   }
   .defaultSelection()
}

Only one segment should be marked as the default.

Persisting Selection

By default, segmented controls reset their selection when the page reloads. You can persist the selected segment across reloads by applying selectionPersisted():

SegmentedControl {
   InlineForEach(ColorScheme.allCases) { scheme in
       Button(
           scheme.name,
           action: .switchColorScheme(scheme)
       )
   }
}
.selectionPersisted()

This stores the selected segment locally and restores it on subsequent visits.

Menus

Lists