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.
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)
}