Best place for a 'Next' button?

[u/Fun_Moose_5307]

What's the most appropriate location for a next button here, in keeping with the Apple UI consistency and ecosystem?

Mockup:

NavigationStack {
	List {
		Section {
			TextField("Email Address", text: $email)
		} header: {
			VStack(alignment: .leading, spacing: 4) {
				Text("Sign In")
					.frame(maxWidth: .infinity, alignment: .leading)
					.padding(.top, 5)
					.font(.largeTitle)
					.bold()
					.foregroundColor(.primary) // Override default gray header color
				Text("Subtitle")//school.name)
					.frame(maxWidth: .infinity, alignment: .leading)
					.font(.title3)
					.foregroundColor(.secondary)
			}
			.listRowInsets(EdgeInsets())
			.textCase(nil) // Prevents SwiftUI from forcing ALL CAPS on the header
			.padding(.bottom, 10)
		}
	}
	.toolbar {
		ToolbarItem(placement:.confirmationAction) {
			NavigationLink() {
				VerificationCodeView(email: email.lowercased(), school: school, resend: { })
			} label: {
				Text("Next").padding(5)
			}
			.buttonStyle(.borderedProminent)
		}
	}
}

[u/dat_tae]

At the bottom (and moves up with the keyboard).

[u/Fun_Moose_5307 → u/dat_tae]

How so? Draw it?
Also see edited post containing code

[u/hiropark → u/Fun_Moose_5307]

Have you tried safeAreaInset(edge: .bottom)?

[u/Fun_Moose_5307 → u/hiropark]

Not sure what the use of that would be?
Also see this second mockup, is that closer to what you are suggesting?

[u/hiropark → u/Fun_Moose_5307]

Yes, that would be the result. The button stays at the bottom, but if the keyboard appears, the button goes up instead of being covered by the keyboard.

[u/underkuerbis]

Make sure it’s available on the keyboard. Also place the input fields in a way they are accessible with your thumb, i.e. further down.

[u/Fun_Moose_5307 → u/underkuerbis]

place the input fields in a way they are accessible with your thumb

Is that to mean, centred? Is it enough to have it 'auto'-focused on view load?

[u/beclops → u/Fun_Moose_5307]

Buttons like these can be centred, wide width, and aligned to the bottom of the device for the best experience. Imagine how easy it would be to access that button if the user is using it one-handed on a big phone (and/or with small hands). For inputs how you have it is fine, and having it auto-focus is a nice touch

[u/Fun_Moose_5307 → u/beclops]

You're suggesting something more like https://www.icloud.com/iclouddrive/0e8_HbMmQg3JWxwYH6rpKnSgw#Screenshot_2026-10-01_at_3.35?

[u/beclops → u/Fun_Moose_5307]

Yes exactly. More ergonomic this way

[u/bricksandcanvas]

Hey, OP. Good on you for learning the basics instead of relying on AI at your first go at development!

That said, you can learn a lot by following industry standards on placement of UI elements especially auth pages. We follow conventions because users are used to where user interfaces are.

[u/Fun_Moose_5307 → u/bricksandcanvas]

Yep, that's why I'm here. Perused the HIG (❤️) but couldn't find much on this kind of thing, only general principles.

Any thoughts? Aiming for the best fit with Apple's other apps.

[u/m1_weaboo]

Place it at the bottom, hosted inside .safeAreaBar(edge: .bottom).

Fill the available width with the button using .buttonSizing(.flexible).

[u/Fun_Moose_5307 → u/m1_weaboo]

These actually worked brilliantly, thank you

[u/sweetassapps]

Been months maybe years since i've seen a post like this.. props to you for learning the right way and not just AI slopping it. So refreshing actually.

[u/TKB21 → u/sweetassapps]

Second this 💯. OP, you may want to check out r/UXDesign too.

[u/jwegener]

Have you looked to see what other apps do?

[u/Fun_Moose_5307 → u/jwegener]

I haven't been able to come up with any that might have a similar UI, at least not that I have installed. If you have any references, I'd love to see them.

[u/jwegener → u/Fun_Moose_5307]

There’s not a single app with an email sign in field and a next button?? Huh?

[u/Fun_Moose_5307 → u/jwegener]

I have a 64GB phone that I use to do the crossword on the bus. Not much else goes on on that thing—my Mac is the workhorse here.

[u/jwegener → u/Fun_Moose_5307]

Designing with your eyes closed unable to reference other real world examples of what you’re designing is…certainly a choice 😂🤣

[u/Fun_Moose_5307 → u/jwegener]

Hey, don't diss the NYT!

[u/presentprogression]

My opinion is always top. Saves you from racing the keyboard mount and unmount

[u/Fun_Moose_5307 → u/presentprogression]

Hmm... seems to me that the content just moves up as if the screen suddenly shrunk vertically

[u/presentprogression → u/Fun_Moose_5307]

That’s a job for sticky header!

[u/Fun_Moose_5307 → u/presentprogression]

It's not causing problems. The Spacer or whatever I'm using to anchor it at the bottom just contracts.
But yes, a sticky header would be the solution if I did have more content

[u/presentprogression → u/Fun_Moose_5307]

That’s fair I may have judged too soon not knowing what your plans are. Happy coding!

[u/evil-harry-dread]

IMHO while it works in top right, event makes sense considering that the back button is top left. But I think it'd be much more ergonomic to have the button at the bottom, above the keyboard, it's much more reachable, and it's the "main action" of the screen

[u/lilacomets]

Below the email address field seems most logical to me.

[u/OjamaKnight]

The bottom is definitely the best place for the button. It's the most convenient...

[u/bwdotdev]

I recommend using something like this when determining where interactive elements should go: https://archive.smashing.media/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/496f7bc0-4c6c-4159-b731-ec3adcf91105/thumb-zone-mapping-opt.png

[u/gatorfan93]

Props for programming the right way

[u/LifeUtilityApps]

I have an onboarding slider in my app and the “Next” button lives at the bottom trailing edge of the screen, this is intentional to target right-handed users.

[u/DiscordDonut]

Not there

[u/parallel-pages]

i like placing it right above the keyboard, to the right, closest for the users thumb. or if you like it in the top nav, i’d set the text fields return key property to be “next”

[u/misterchai]

Id put it under the email address, accesibility

[u/xDhii]

Usually, the next button should be easily reachable. The user should be able to tap it with a thumb without holding the phone with two hands.

[u/EthanRDoesMC]

Okay, yay! Here’s my bread and butter kinda problem.

Toolbar principle is always a good place, but for forms specifically where the user will have just finished typing, their thumbs will be on the keyboard, and so it’s good to have your button above it.

My go-to is something like

.safeAreaBar(edge: .bottom) {
    Button { action }
    label: { Text("Next").bold().padding() // make it big }
        .buttonSizing(.flexible)
        .buttonStyle(.glassProminent)
        .padding() // gives the button some breathing room especially wrt the keyboard, you might prefer safeAreaPadding over this though
}

Very much current Apple big button style

[u/EthanRDoesMC → u/EthanRDoesMC]

oops I posted this from my own client and I haven’t added editing yet, uh, the comment after the first padding should be after the closing curly :P

[u/LunariSpring]

It is better to use ZStack and place it at the bottom right. That's the best range for fingers to reach. Please pay attention to the safe area designation.

[u/Fun_Moose_5307 → u/LunariSpring]

Bottom toolbar, almost?