List chrome

These iOS-only modifiers style a List and its rows. listStyle sets the overall list appearance; listRowBackground and listRowSeparator adjust individual row chrome. listStyle is applied to the List itself; the row modifiers are applied to each item inside the list, not to the list container.

listStyle

Sets the visual style of a List.

.listStyle(style: "automatic" | "plain" | "insetGrouped" | "grouped" | "inset" | "sidebar"): Component

string

required

The list style to apply:

"automatic" — the platform default style
"plain" — a plain list with no section styling
"insetGrouped" — grouped sections with inset rounded corners (default on iOS)
"grouped" — grouped sections with full-width backgrounds
"inset" — plain list with inset margins
"sidebar" — optimized for sidebar navigation

Plain list

List([
    ForEach(items, (item) =>
        Text(item.name)
    )
]).listStyle("plain")

Grouped list with sections

List([
    Section("Fruits", [
        Text("Apple"),
        Text("Banana"),
        Text("Cherry")
    ]),
    Section("Vegetables", [
        Text("Carrot"),
        Text("Broccoli")
    ])
]).listStyle("insetGrouped")

Sidebar style

List([
    ForEach(menuItems, (item) =>
        Label(item.title, item.icon)
    )
]).listStyle("sidebar")

listRowBackground

Sets the background view for a list row.

.listRowBackground(content: Component): Component

Component

required

The component to display as the row’s background.

Colored row background Apply to content inside a List’s ForEach.

List([
    ForEach(items, (item) =>
        Text(item.name)
            .listRowBackground(Color("blue").opacity(0.1))
    )
])

Alternating row backgrounds

List([
    ForEach(items, (item, index) =>
        Text(item.name)
            .listRowBackground(
                index % 2 === 0
                    ? Color("gray").opacity(0.1)
                    : Color("white")
            )
    )
])

This modifier should be applied to the content views inside a List, not to the List itself. The background fills the entire row area, including under any separators.

listRowSeparator

Controls the visibility of list row separators.

.listRowSeparator(visibility: "hidden" | "visible"): Component

"hidden" | "visible"

required

Whether the separator line below this row is visible or hidden.

Hiding separators

List([
    ForEach(items, (item) =>
        Text(item.name)
            .listRowSeparator("hidden")
    )
])

Selectively hiding separators

List([
    ForEach(items, (item, index) =>
        Text(item.name)
            .listRowSeparator(
                index === items.length - 1
                    ? "hidden"
                    : "visible"
            )
    )
])

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

listStyle

listRowBackground

listRowSeparator

See also

​listStyle

​listRowBackground

​listRowSeparator

​See also

listStyle

listRowBackground

listRowSeparator

See also