Navigation/DSSegmentedControl

DSSegmentedControl

navigation

since v1.0

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

iOS 17+macOS 14+

Purpose

Switching between views or filter modes within the same screen.

Props

Prop	Type	Default	Description
optionsreq	[(label: String, value: T, icon: String?)]	—	Segment options.
selectedreq	Binding<String>	—	Active segment value.

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"),
    ],
    selected: $viewMode
)

Time range filter

Mutually exclusive time period selection.

swift

DSSegmentedControl(
    options: [
        (label: "Day", value: "day", icon: nil),
        (label: "Week", value: "week", icon: nil),
        (label: "Month", value: "month", icon: nil),
        (label: "Year", value: "year", icon: nil),
    ],
    selected: $selectedPeriod
)

Composition: Dashboard with filters

Segmented control above chart.

swift

VStack(alignment: .leading, spacing: DSSpacing.lg) {
    Text("Revenue Overview")
        .font(.system(size: 20, weight: .semibold))
    
    DSSegmentedControl(
        options: [
            (label: "Week", value: "week", icon: nil),
            (label: "Month", value: "month", icon: nil),
            (label: "Year", value: "year", icon: nil),
        ],
        selected: $period
    )
    
    RevenueChart(period: period)
}