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.

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?)]	—	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)
}