selection/DSFilterBar

DSFilterBar

selection
since 0.1.0

Horizontally scrolling row of single-select filter chips.

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

Purpose

Let people narrow a list with one active filter at a time (All, Open, Closed…). For multi-select filters, combine DSChipToggle inside a DSChipGroup.

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

PropTypeDefaultDescription
filtersreq[String]—Filter labels, in display order.
selectedreqBinding<String>—The active filter label.

Examples

Issue filter

Filter a list by status.

swift
@State private var filter = "All"

VStack(alignment: .leading) {
    DSFilterBar(filters: ["All", "Open", "In review", "Closed"], selected: $filter)
    List(issues.filter { filter == "All" || $0.status == filter }) { issue in
        Text(issue.title)
    }
}

Multi-select alternative

Independent toggles when several filters can be active.

swift
DSChipGroup {
    DSChipToggle("Remote", isOn: $remote)
    DSChipToggle("Full-time", isOn: $fullTime)
    DSChipToggle("Senior", isOn: $senior)
}

Related Components

ChipChipToggleChipGroup