State and actions

SwiftUI: conditionally show items in the view

Learn how to conditionally show or hide views in a SwiftUI form, using an if statement and a Toggle to reveal extra options only when it is enabled.

8 minute lesson

~~~

One common thing to do in a form is to have a toggle and when that toggle is enabled, show a bunch of additional options.

You can see this all the time in the Settings app, for example when you enable WiFi.

iOS Settings app showing Wi-Fi toggle off and on with additional network options appearing when enabled

How can you do that?

First create a Form view with a Toggle control:

struct ContentView: View {
    @State private var enabled = false
    
    var body: some View {
        Form {
            Toggle("Enable?", isOn: $enabled)
        }
    }
}

Then add this block after the Toggle view:

if enabled {
    Section {
        Text("This appears only if enabled")
    }
}

like this:

struct ContentView: View {
    @State private var enabled = false
    
    var body: some View {
        Form {
            Toggle("Enable?", isOn: $enabled)
            
            if enabled {
                Section {
                    Text("This appears only if enabled")
                }
            }
        }
    }
}

Now with the toggle disabled, the Text view will not be visible:

Xcode preview showing SwiftUI form with disabled toggle displaying only Enable? switch

But when you enable the toggle, it appears:

Xcode preview showing SwiftUI form with enabled toggle revealing additional text This appears only if enabled

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →