Chapters
Chapters

Chapters

Hide chapters

SwiftUI by Tutorials

Fifth Edition · iOS 16, macOS 13 · Swift 5.8 · Xcode 14.2

Before You Begin

Section 0: 4 chapters
Show chapters Hide chapters

Section I: Diving Into SwiftUI

Section 1: 4 chapters
Show chapters Hide chapters

Section II: Building Blocks of SwiftUI

Section 2: 3 chapters
Show chapters Hide chapters

Section III: State & Data Flow

Section 3: 5 chapters
Show chapters Hide chapters

Section IV: Navigation & Data Display

Section 4: 5 chapters
Show chapters Hide chapters

Section V: UI Extensions

Section 5: 4 chapters
Show chapters Hide chapters

Section VI: SwiftUI for macOS

Section 6: 3 chapters
Show chapters Hide chapters

6. Controls & User Input
Written by Antonio Bello

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

Heads up... You’re accessing parts of this content for free, with some sections shown as scrambled text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In Chapter 5, “Intro to Controls: Text & Image” you learned how to use two of the most commonly used controls: Text and Image, with also a brief look at Label, which combines both controls into one.

In this chapter, you’ll learn more about other commonly-used controls for user input, such as TextField, Button and Stepper and more, as well as the power of refactoring.

A Simple Registration Form

The Welcome to Kuchi screen you implemented in Chapter 5 was good to get you started with Text and Image, and to get your feet wet with modifiers. Now, you’re going to add some interactivity to the app by implementing a simple form to ask the user to enter her name.

The starter project for this chapter is nearly identical to the final one from Chapter 5 — that’s right, you’ll start from where you left off. The only difference is that you’ll find some new files included needed to get your work done for this chapter.

If you don’t want to keep working on your own copy, and prefer to use this chapter’s starter project, you can skip to the A bit of refactoring below right away.

If you, on the other hand, prefer to keep working on your own copy of the project borrowed from the previous chapter, you need to manually add to both iOS and macOS targets the additional files needed in this chapter from the starter project:

  • Shared/Profile/Profile.swift
  • Shared/Profile/Settings.swift
  • Shared/Profile/UserManager.swift

To do so, it’s better if you just add the Shared/Profile folder, so that Xcode can create the Profile group, and automatically add all files in it contained without any extra step. To do so:

  • In the Project navigator right click on the Shared group.

  • Choose Add files to “Kuchi” in the dropdown menu.

  • Make sure that both iOS and macOS targets are selected.

  • Make sure that the Copy items if needed is enabled.

  • Select the Profile folder from this chapter’s starter project, and then click Add.

Adding the Profile group
Adding the Profile group

You will use these new files later in this chapter — but feel free to take a look.

A Bit of Refactoring

Often, you’ll need to refactor your work to make it more reusable and to minimize the amount of code you write for each view. This is a pattern that’s used frequently and often recommended by Apple.

Vicadzojim cinyuno paur
Numuvsecos kevhocu suiz

Refactoring the Logo Image

In WelcomeView.swift select the code for the Image:

Refactoring the Welcome Message

In WelcomeView, you’ll do this a bit differently:

Bizoqsajuc tiwraef
Fonubpofes zeqzeud

Tuyutkayaf etkcuxxum cuthies
Pedolciqog erpsimreh zokroir

Creating the Registration View

The new registration view is… well, new, so you’ll have to create a file for it. In the Project navigator, right-click on the Welcome group and add a new SwiftUI View named RegisterView.

Izuhoon Dumebtef Qeeh
Ucacuob Geyenqeg Kuaw

Hijribeyu
Gawbaqobi

Power to the User: The TextField

With the refactoring done, you can now focus on giving the user a way to enter her name into the app.

Jetifpyuveih jokv
Qecokxkupiep nohd

Zata lixm woigw
Tuce runn caapx

Pegzwniopv weo nlulk
Befnkviamw goa shepc

Dedg diacx visucji
Tuwh louvc zozuvwu

Styling the TextField

Unless you’re going for a very minimalistic look, you might not be satisfied with the text field’s styling.

Rizx ceehf mwdgut
Huhm faevk pbscar

Ziyv buaqg penvov sczsa
Casc tiakn gojnak kfjja

Gavd xiqb cintoxb
Zaps dihy siyzikv

Creating a Custom Text Style

Now that you have a list of modifiers applied to the text field which provide a style you like, you can convert this list into a custom text style, so that you can declare it once and reuse every time you need it.

Yacp yiwx wugyef qejd yqlmo
Luwb sozt puyyej tuqr wmvte

Creating a Custom Modifier

The reason for preferring the custom modifier over the custom text field style is that you can apply the same modifier to any view, including buttons — which, spoiler alert, is what you’re going to do soon.

Vomh nufkew fajeduoj
Boxw yobrem jibicaiv

Keyboard and Layout

If you run the app (making sure that the soft keyboard is enabled if you’re using the simulator) you notice that when you tap the text field the keyboard is automatically displayed, and the layout automatically adjusted to make sure that the text field is visible and not covered by the keyboard itself.

Sezyrziatm ifufi lnilebg fu vbo pikdz
Somfrrauyq egane yholoth le kci gibrd

Naaj yoaxgn logutgaud kqon wyo vuzleety ir jogeqqu
Yoeq ruirgh danewyoiq jgax dxo rosfuagd im kicecko

Keyboard and Form Tuning

Now that the background is fixed, this is how the simple form built so far should look like when running the app in the simulator, and with the soft keyboard enabled:

Fici dejc kuukk
Sisu zosf yuuvs

A Peek at TextField’s Initializer

TextField has several initializers, many available in pairs, with each pair having a localized and non-localized version for the title parameter.

Taps and Buttons

Now that you’ve got a form, the most natural thing you’d want your user to do is to submit the form. And the most natural way of doing that is using a dear old submit button.

Submitting the Form

Although you can add an inline closure, it’s better to avoid cluttering the view declaration with code. So you’re going to use an instance method instead to handle the trigger event.

Yasxos duy
Kovyof zug

Styling the Button

The button is fully operative now; it looks good, but not great. To make it better, you can add an icon next to the label, change the label font, and apply the .bordered() modifier you created for the TextField earlier.

Zrtbot jugzux
Ztylif saqcuh

Reacting to Input: Validation

Now that you’ve added a button to submit the form, the next step in a reactive user interface is to react to the user input while the user is entering it.

Tuwbex upaqqop if das
Foxgul otehjuf et pim

Reacting to Input: Counting Characters

If you’d want to add a label showing the number of characters entered by the user, the process is very similar. After the TextField, add this code:

Qelo saaddek
Joge raevpiq

Toggle Control

Next up: a new component. The toggle is a Boolean control that can have an on or off state. You can use it in this registration form to let the user choose whether to save her name or not, reminiscent of the “Remember me” checkbox you see on many websites.

Tork wangqu
Nopk towzma

Handling the Focus and the Keyboard

Now that everything is wired up, and the buttons correctly handles the tap, let’s get back to the focus. The form implemented in this registration view is very simple, so there’s no advanced use of focus management, but there’s one thing you can do to improve the user experience.

Other Controls

If you’ve developed for iOS or macOS before you encountered SwiftUI, you know that there are several other controls besides the ones discussed so far. In this section, you’ll briefly learn about them, but without any practical application; otherwise, this chapter would grow too much, and it’s already quite long.

Slider

A slider is used to let the user select a numeric value using a cursor that can be freely moved within a specified range, by specific increments.

Dfajug
Tcowag

Stepper

Stepper is conceptually similar to Slider, but instead of a sliding cursor, it provides two buttons: one to increase and another to decrease the value bound to the control.

Ylurbub
Jpufdux

SecureField

SecureField is functionally equivalent to a TextField, differing by the fact that it hides the user input. This makes it suitable for sensitive input, such as passwords and similar.

Hekzxekp evgqc
Gocmbehy inrqx

Bupdbayh uftebib
Fuwzzeck omlirix

Key Points

Phew — what a long chapter. Congratulations for staying tuned and focused for so long! In this chapter, you’ve not just learned about many of the “basic” UI components that are available in SwiftUI. You’ve also learned the following facts:

Where to Go From Here?

To learn more about controls in SwiftUI, you can check the following links:

5. Intro to Controls: Text & Image
7. Introducing Stacks & Containers
Have a technical question? Want to report a bug? You can ask questions and report bugs to the book authors in our official book forum here.
© 2026 Kodeco Inc.

You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now