History
Loading...
Loading...
October 1, 2025
List with selection parameter and .listStyle(.plain) to create multi-selection interfaces. Set your selection to Set<ID> type and the list automatically shows checkboxes on items when EditMode is active.This pattern properly manages multi-selection state by using a Set for selected items, integrating with EditMode for consistent UX, and providing visual feedback both during and after selection. The selection binding automatically handles the checkbox appearance in edit mode.
struct MultiSelectionList: View {
@State private var items = ["Apple", "Banana", "Cherry", "Date"]
@State private var selectedItems: Set<String> = []
@State private var editMode: EditMode = .inactive
var body: some View {
NavigationView {
List(items, id: \.self, selection: $selectedItems) { item in
HStack {
Text(item)
Spacer()
if selectedItems.contains(item) && editMode == .inactive {
Image(systemName: "checkmark.circle.fill")
.foregroundColor(.blue)
}
}
}
.environment(\.editMode, $editMode)
.navigationTitle("Select Items")
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
EditButton()
}
ToolbarItem(placement: .navigationBarLeading) {
Text("\(selectedItems.count) selected")
.font(.caption)
}
}
}
}
}Using Set<ID> ensures O(1) lookup performance for selection checks, prevents duplicate selections, and provides a clean API for batch operations. Integrating with EditMode follows Apple's design patterns and provides users with familiar interaction patterns across the system.