layout/DSSection

DSSection

layout
since v1.0

Named content group with an optional header, footer note, and inset background.

iOS 17+macOS 14+

Purpose

Organise forms and settings into logical named groups.

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
titleString?nilSection heading.
footerString?nilExplanatory footer note.
contentreqViewBuilderโ€”Section content.

Examples

Settings sections

Two sections in a settings screen.

swift
DSSection("Notifications", footer: "Alerts only apply when the app is in the background.") {
    DSToggle("Push notifications", isOn: $pushEnabled)
    DSToggle("Email digest", isOn: $emailEnabled)
}
DSSection("Privacy") {
    DSListRow(title: "Data & Permissions") { navigate(.privacy) }
}

Related Components