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.

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

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