selection/DSChipToggle

DSChipToggle

selection
since 1.2.0

Selectable chip with on/off state that shows a checkmark when selected.

iOSmacOS

Purpose

Use for multi-select filters or toggleable options. Shows a checkmark icon when active and animates state changes smoothly.

States

off

Unselected with border, no checkmark

on

Filled with primary color, shows checkmark icon

unavailable

Dimmed with strikethrough overlay

Props

PropTypeDefaultDescription
titlereqString—Chip label text
isOnreqBinding<Bool>—Binding to selected state
sizeDSChipSize.mdChip size: .sm or .md
isUnavailableBoolfalseWhen true, disabled with strikethrough
accessibilityLabelString?nilOptional accessibility label

Examples

Multi-select filters

Toggle chips for multiple selections.

swift
@State var selectedTags: Set<String> = []

HStack {
    ForEach(["Design", "Code", "Marketing"], id: \.self) { tag in
        DSChipToggle(tag, isOn: Binding(
            get: { selectedTags.contains(tag) },
            set: { if $0 { selectedTags.insert(tag) } else { selectedTags.remove(tag) } }
        ))
    }
}

Unavailable option

Chip with unavailable state.

swift
DSChipToggle("Premium Feature",
    isOn: $isPremiumEnabled,
    isUnavailable: !user.isPremium
)

Usage Guidelines

  • Use for multi-select scenarios where users can pick multiple options
  • The checkmark provides clear visual feedback for selection state
  • Use isUnavailable to show options that require upgrades or permissions
  • Combine with DSChipGroup for organized layouts

Related Components

ChipChipGroupCheckbox