Interactive previews iPhone

Outline Group

A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data.

Outline Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview

Platform Compatibility

iOS 14.0+ iPadOS 14.0+ macOS 11.0+ visionOS 1.0+

Tags

SwiftUI Code

Docs
struct TreeItem: Identifiable {
  let id = UUID()
  let name: String
  let children: [TreeItem]?

  init(_ name: String, children: [TreeItem]? = nil) {
    self.name = name
    self.children = children
  }
}

let data = [
TreeItem("Header", children: [
TreeItem("Foo", children: [
TreeItem("Foo 1"),
TreeItem("Foo 2")
]),
TreeItem("Bar", children: [
TreeItem("Bar 1"),
TreeItem("Bar 2")
])
])
]

var body: some View {
  List {
    OutlineGroup(data, children: \.children) { item in
    Text(item.name)
  }
}
}

Found an issue or have a suggestion?

Created: August 11, 2025Updated: August 11, 2025
Connect Wizard

Connect Wizard

Unlock insights App Store Connect doesn’t show you.

Get Started

More List Components

View all
Disclosure Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
initializer

Disclosure Group

A view that shows or hides another content view, based on the state of a disclosure control.

Edit Button - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
initializer

Edit Button

A button that toggles the edit mode environment value.

Section Index Label and Visibility - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

Section Index Label and Visibility

Sets the label that is used in a section index to point to this section, typically only a single character long. Changes the visibility of the list section index.

Move Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Move Disabled

Adds a condition for whether the view’s view hierarchy is movable.

Delete Disabled - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Delete Disabled

Adds a condition for whether the view’s view hierarchy is deletable.

Refreshable List - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Refreshable List

Marks this view as refreshable.

Swipe Action - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Swipe Action

Adds custom swipe actions to a row in a list.

List Badge Prominence - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

List Badge Prominence

Specifies the prominence of badges created by this view.

Explore Other Components

Browse all
Future DatePicker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Future DatePicker

Creates an instance that selects a Date in a closed range

Button Styles - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

Button Styles

A type that applies standard interaction behavior and a custom appearance to all buttons within a view hierarchy

PaletteControlGroupStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

PaletteControlGroupStyle

A control group style that presents its content as a palette.

TextFieldLink - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
initializer

TextFieldLink

A control that requests text input from the user when pressed

Picker Divider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
content

Picker Divider

A Picker with a Divider

PalettePickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

PalettePickerStyle

A picker style that presents the options as a row of compact elements. When used outside of menus, this style is rendered as a segmented picker. If that is the intended usage, consider segmented instead.

NavigationLinkPickerStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

NavigationLinkPickerStyle

A picker style represented by a navigation link that presents the options by pushing a List-style picker view.

Multiple Sources Toggle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Multiple Sources Toggle

Creates a toggle that updates the selected property for all sources. Once toggled, all sources will have the same value.