Chapter 13
Building a Form with Picker, Toggle and Stepper

Mobile apps use forms to interact with users and solicit required data from them. Every day, when using your iPhone, it's very likely you will come across a mobile form. For example, a calendar app may present you a form to fill in the information for a new event. A shopping app asks you to provide the shipping and payment information by showing you a form. As a user, I can't deny that I hate filling out forms. That said, as a developer, these forms help us interact with users and ask for information to complete certain operations. Developing a form is definitely an essential skill you need to grasp.

In the SwiftUI framework, there is a special UI control called Form. With this new control, you can easily build a form. In this chapter, I will show you how to build a form using this Form component. While building out a form, you will also learn how to work with common controls like picker, toggle, and stepper.

Figure 1. Building a Setting screen
Figure 1. Building a Setting screen

Okay, let's discuss the project we'll be working on. Take a look at Figure 1. We're going to build a Settings screen for the Restaurant app that we've been working on in earlier chapters. This screen will provide users with options to configure their order and filter preferences. This type of form is commonly seen in real-life projects. Once you understand how it works, you will be able to create your own form in your app projects.

In this chapter, our focus will be on implementing the layout of the form. You'll learn how to use the Form component to structure the Setting screen. We'll also implement a picker for selecting a sort preference, as well as a toggle and a stepper for indicating filter preferences. Once you understand how to lay out a form, in the next chapter, I'll show you how to make the app fully functional by updating the list based on the user's preferences. You'll learn how to store user preferences, share data between views, and monitor data updates using @Environment.

To access the full content and the complete source code, please get your copy at

results matching ""

    No results matching ""