How to add list section index labels
Updated for Xcode 16.4
New in iOS 26
SwiftUI's sectionIndexLabel() lets us add index labels to a List, which is the name Apple uses for the tappable table of contents that sits on the trailing edge of lists – you can see it in the Contacts app, for example, where it lets you scrub through the alphabet quickly.
To use the modifier, attach it to a Section like this:
struct ContentView: View {
let letters = ["A", "B", "C", "D", "E", "F", "G"]
var body: some View {
List(letters, id: \.self) { letter in
Section(letter) {
ForEach(0..<10) { number in
Text("Row \(number)")
}
}
.sectionIndexLabel(letter)
}
}
}
Download this as an Xcode project
That will show the section index immediately, letting users move between the letters with a simple swipe.
You can choose to show or hide the section titles using the listSectionIndexVisibility() modifier, attached to the whole List:
.listSectionIndexVisibility(.visible)
SAVE 50% All our books and bundles are half price for Black Friday, so you can take your Swift knowledge further for less! Get my all-new book Everything but the Code to make more money with apps, get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn Swift Testing, design patterns, and more.
Similar solutions…
- How to change the order of view layering using Z index
- How to set custom accessibility labels and hints
- How to create static labels with a Text view
- Building a menu using List
- How to add sections to a list
