Search bar occupying all available space on toolbar - macOS 26

Question

I have two views with .searchable modifier and different placements. In both cases the search bar takes a humongous space in the toolbar, thing that doesn't happen in other apps (Apple native ones, like Mail and Contacts). What am I doing wrong? I want the search bar to be atmost the space it occupies on the native apps, but instead it takes space from other very important buttons on the toolbar.

I'm using macOS Tahoe Public Beta 4 (25A5346a)

.toolbar {
    ToolbarSpacer(.flexible)
            
    ToolbarItem {
        Button { refresh() } label: {
            Label(
                "Refresh categories",
                systemImage: "arrow.trianglehead.2.clockwise.rotate.90"
            )
            .labelStyle(.iconOnly)
        }
    }

            
    ToolbarSpacer(.fixed)

    ToolbarItem {
        Button {
            filters.isListFilterVisible = true
        } label: {
            Label("Filter list", systemImage: "line.3.horizontal.decrease")
                .labelStyle(.iconOnly)
                .foregroundStyle(.primary)
        }
        .popover(
            isPresented: $filters.isListFilterVisible,
            arrowEdge: .bottom
        ) {
            MonthYearPicker($filters.date)
                .frame(minWidth: 180)
                .padding(.medium)
        }
        .buttonStyle(.borderedProminent)
        .tint(
            filters.hasFilteredDate ? .accent : .secondary.opacity(0)
        )
    }

    ToolbarSpacer(.fixed)

    ToolbarItem {
        Button {
            isCreationSheetVisible = true
        } label: {
            Label("Add category", systemImage: "plus")
                .bold()
                .labelStyle(.iconOnly)
        }
    }
}

View1 using .searchable(text: $filters.searchQuery, placement: .toolbarPrincipal)

View2 using .searchable(text: $filters.searchQuery, placement: .toolbar)

You could see if it helps to add a ToolbarSpacer. Unfortunately, I don't have macOS 26, so I didn't try it already. — Benzy Neez
– Benzy Neez, Commented Aug 28 at 15:56

Gowtham Ravi · Accepted Answer · 2025-08-26 09:48:57Z

0

On macOS, the behavior you’re seeing comes from the placement you’re using.

When you write:

.searchable(text: $filters.searchQuery, placement: .toolbarPrincipal)

you’re explicitly telling SwiftUI to put the search field in the toolbar’s principal slot. The principal slot is designed to expand and take as much space as possible in the center of the toolbar, which is why your search bar looks oversized and pushes other buttons aside.

That’s different from Apple’s apps like Mail or Contacts, which don’t force the placement — they let the system decide. If you just write:

.searchable(text: $filters.searchQuery)

without specifying a placement, SwiftUI maps it to the standard NSSearchField behavior on macOS. That gives you the compact search field you expect, aligned to the trailing edge of the toolbar, without it occupying the whole thing.

Apple’s own documentation backs this up:

“With this configuration, the search field appears on the trailing edge of the toolbar in macOS. In iOS and iPadOS, the first or second column displays the search field …”
Apple Developer Documentation

In short:

.toolbarPrincipal → stretches to fill the toolbar (expected behavior for the principal slot).
Default placement (no override) → compact, native-looking search field like Mail or Contacts.

So the fix is simply to remove the explicit placement unless you really want the full-width principal style.

answered Aug 26 at 9:48

Gowtham Ravi

856 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MarconiGRF Aug 26 at 11:49

That doesn't look quite right. If I don't specify the placement it will appear right before the view (below the tab bar), not in the toolbar. screenshot

Gowtham Ravi Aug 26 at 12:47

Are you placing the .searchable outside the navigationView or navigationSplitView? I am getting the proper view while placing the .searchable outside of the navigationView

MarconiGRF Aug 26 at 13:37

I'm using a TabView, but it doesn't matter where I put the .searchable modifier (either in the tabview itself or the views of each tab) they all end up in the same result I described on the comment :(

Collectives™ on Stack Overflow

Search bar occupying all available space on toolbar - macOS 26

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related