selection/DSFilterChip
DSFilterChip
selectionSelectable pill chip with a checkmark on active state. Can be used standalone or in a multi-select group.
iOS 17+macOS 14+
Purpose
Filter bars, tag selectors, and multi-choice preference screens.
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.
States
unselected
Ghost pill with border.
selected
Filled with primary colour and leading checkmark.
disabled
50% opacity, no interaction.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelreq | String | — | Chip label text. |
| isSelectedreq | Binding<Bool> | — | Selection state. |
| icon | String? | nil | Optional leading SF Symbol. |
| isDisabled | Bool | false | Disables the chip. |
Examples
Category filter bar
Horizontally scrolling filter row.
swift
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: DSSpacing.xs) {
ForEach(categories) { cat in
DSFilterChip(label: cat.name, isSelected: $cat.isActive)
}
}
.padding(.horizontal, DSSpacing.md)
}