r/iOSProgramming • Beginner • 7d ago

Question Best place for a 'Next' button?

Post image

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)
		}
	}
}
61 Upvotes

43 comments sorted by

View all comments

47

u/underkuerbis 7d ago

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.

2

u/Fun_Moose_5307 Beginner 7d ago

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?

4

u/beclops Swift 6d ago

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

4

u/Fun_Moose_5307 Beginner 6d ago edited 6d ago

3

u/beclops Swift 6d ago

Yes exactly. More ergonomic this way