Navigation/DSSegmentedControl

DSSegmentedControl

navigation

since 0.1.0

Horizontal row of mutually exclusive segments with a sliding active indicator.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Switching between views or filter modes within the same screen.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
optionsreq	[(label: String, value: T, icon: String?)]	—	Segments. T is any Hashable value.
selectionreq	Binding<T>	—	Active segment value.
size	DSButtonSize	.md	Control height (.sm, .md, .lg).

Examples

View mode switcher

Switch between list and grid views.

swift

DSSegmentedControl(
    options: [
        (label: "List",  value: "list",  icon: "list.bullet"),
        (label: "Grid",  value: "grid",  icon: "square.grid.2x2"),
        (label: "Board", value: "board", icon: "rectangle.split.3x1"),
    ],
    selection: $viewMode
)

Time range filter

Compact, text-only segments.

swift

DSSegmentedControl(
    options: [
        (label: "Day", value: Period.day, icon: nil),
        (label: "Week", value: Period.week, icon: nil),
        (label: "Month", value: Period.month, icon: nil),
    ],
    selection: $period,
    size: .sm
)