---
title: "DropletSettingsSection, DroppyKit"
description: "A titled group of rows inside a DropletSettingsPane (DroppyKit 1.9.0)."
canonical: "https://getdroppy.app/docs/droppykit/api/droplet-settings-section"
last-updated: "2026-09-09"
---

# DropletSettingsSection

A titled group of rows inside a DropletSettingsPane (DroppyKit 1.9.0).

`@MainActor struct DropletSettingsSection<Header, Content> where Header : View, Content : View`

The header is what sits above the card: usually [`settingsSectionHeader(_:)`](https://getdroppy.app/docs/droppykit/api/settings-section-header), optionally with a secondary line under it for the "Energy Mode" shape System Settings uses:

```
DropletSettingsSection {
    VStack(alignment: .leading, spacing: 2) {
        settingsSectionHeader("Clocks")
        Text("Shown in the widget, in this order.")
            .font(.body)
            .foregroundStyle(.secondary)
    }
} content: {
    DropletSettingsCard { ... }
}
```

In native mode it is the Form's `Section`, and the card inside it joins that section rather than opening a second one. Outside native mode it stacks the header over the card at the Form's own header-to-card gap, which is what a hand-written `VStack { settingsSectionHeader; DropletSettingsCard }` should draw.

## Initializers

### init(header:content:)

`@MainActor init(@ViewBuilder header: () -> Header, @ViewBuilder content: () -> Content)`

Creates a section from its header and its content.

## Properties

### body

`@MainActor var body: some View { get }`