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)
SPONSORED Take the pain out of configuring and testing your paywalls. RevenueCat's all new, fully customizable Paywall Editor allow you to remotely change your paywall view without any code changes or app updates.
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
