How it works
TabRole describes the purpose a tab serves within a TabView, letting the system give certain tabs distinct placement and behavior rather than treating every tab identically. Its primary value is the search role, which signals that a tab is the destination for searching content; on platforms that support it, SwiftUI can lift such a tab out of the regular run of tabs and present it in a dedicated, persistent location. Reach for TabRole when a tab is not just another section of your app but a specialized affordance the system should recognize, so you describe intent declaratively instead of hand-positioning the tab yourself.
Pass a role through Tab's role: parameter
TabRole is supplied to a tab at construction time through the role: argument of the Tab initializer. In the example, the first two tabs omit the parameter and so default to an ordinary content role, while the third,
Tab("Search", systemImage: "magnifyingglass", value: 3, role: .search), declares its purpose explicitly. Everything else about the tab, its label, image, andvalue, stays the same.Use the .search role to mark a search destination
The role you reach for in practice is the static member
.search, the TabRole value that identifies a tab whose job is searching. Applying it to the"Search"tab tells SwiftUI this is a search surface, which is what allows the system to treat it differently from"Home"and"Browse"instead of laying it out in the same row.Leave content tabs role-less for default placement
A nil or unspecified role means a tab participates as standard content. The
"Home"and"Browse"tabs in the example carry no role and therefore sit in the conventional tab arrangement, providing the baseline against which the role-bearing"Search"tab is distinguished. You only annotate the tabs whose purpose departs from ordinary navigation.Keep selection working across roles
A roled tab still has identity and selectability like any other. The
"Search"tab keeps itsvalue: 3and binds to the sameselectionstate viaTabView(selection: $selection), so assigning the role changes how the tab is presented without removing it from the selection model that drives@State private var selection.
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 TabRoleDemo: View {
@State private var selection = 1
var body: some View {
TabView(selection: $selection) {
Tab("Home", systemImage: "house", value: 1) {
Text("Home").padding()
}
Tab("Browse", systemImage: "square.grid.2x2", value: 2) {
Text("Browse").padding()
}
Tab("Search", systemImage: "magnifyingglass", value: 3, role: .search) {
Text("Search").padding()
}
}
}
}