layout/DSChipGroup

DSChipGroup

layout
since 1.2.0

Horizontal container for chips with consistent spacing.

iOSmacOS

Purpose

Groups multiple chips together with uniform spacing. Simplifies layout when displaying multiple filter or tag chips.

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.

Props

PropTypeDefaultDescription
spacingCGFloatDSSpacing.smSpace between chips
contentreqViewBuilder—Chip content

Examples

Chip group

Group of chips with custom spacing.

swift
DSChipGroup(spacing: DSSpacing.md) {
    DSChip("All", variant: .filled, isSelected: filter == "All") { filter = "All" }
    DSChip("Active", variant: .filled, isSelected: filter == "Active") { filter = "Active" }
    DSChip("Done", variant: .filled, isSelected: filter == "Done") { filter = "Done" }
}

Usage Guidelines

  • Use to maintain consistent spacing between chips
  • Wrap in ScrollView for horizontal scrolling when needed
  • Consider using FlowLayout for wrapping chips across multiple lines

Related Components

ChipChipToggleFlowLayout