How it works
A DisclosureGroup is a view that shows or hides its content behind a label the person can tap to expand or collapse. Use it to defer secondary or advanced controls until they're needed, keeping a screen uncluttered while still making everything reachable. It's the natural choice for optional settings, detail sections, and any group of views that doesn't need to be visible at all times. Because expansion is a piece of view state, you can either let DisclosureGroup manage it automatically or bind it to your own property to control and observe it.
Give the group a label and content with init(_:isExpanded:content:)
The initializer takes a title for the always-visible header and a
contentclosure holding the views to disclose. HereDisclosureGroup("Advanced Settings", isExpanded: $isExpanded)labels the header, and its trailing closure supplies the twoTogglerows and theTextthat appear only when expanded.Drive expansion with the isExpanded binding
The
isExpandedparameter takes aBinding<Bool>so expansion lives in your own state. Backing it with@State private var isExpanded = trueand passing$isExpandedlets the group start open and lets your code read or change whether it's expanded; omit this argument andDisclosureGroupmanages the state internally instead.Compose any views inside the content closure
Whatever you place in the
contentclosure becomes the disclosed body, built with the standard view builder. This example discloses interactiveToggle("Wi-Fi", isOn:)andToggle("Bluetooth", isOn:)controls alongside a plainText, showing that the hidden section can hold real, fully functional views, not just labels.Style the disclosed content like any view
Views inside the group accept the usual modifiers, so you can shape the revealed section independently of the header. The
Text("Airplane Mode is off")here uses.foregroundStyle(.secondary)to read as supporting detail, while.padding()on theDisclosureGroupitself insets the whole control.
@State private var isExpanded = true to false so the group starts collapsed, then tap the "Advanced Settings" header to watch the Toggle rows disclose.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct DisclosureGroupDemo: View {
@State private var isExpanded = true
var body: some View {
DisclosureGroup("Advanced Settings", isExpanded: $isExpanded) {
Toggle("Wi-Fi", isOn: .constant(true))
Toggle("Bluetooth", isOn: .constant(false))
Text("Airplane Mode is off")
.foregroundStyle(.secondary)
}
.padding()
}
}