NEW: Join my free 100 Days of SwiftUI challenge today! >>

How to hide the label of a Picker, Stepper, Toggle, and more using labelsHidden()

Paul Hudson    @twostraws   

Fully updated for Xcode 11.2

SwiftUI requires that we add labels to its controls, and it’s common to want to hide those labels so you can get a more precise UI layout. However, there’s a bad way of hiding labels and a good way, and it’s already common to see folks choosing the bad choice despite it actively hurting users.

First, let’s look at the right way to hide labels. As an example, here’s a Picker that lets users select a number:

Picker("Select a number", selection: $selectedNumber) {
    ForEach(0..<10) {
        Text("\($0)")
    }
}

By default, that will show “Select a number” on the left, and (on iOS at least) a wheel picker on the right. This looks poor, because the label is crammed into a small space – a better idea would be to have a VStack with a custom text label, then hide the label in the Picker.

To hide the label for a Picker – or indeed for a DatePicker, a Stepper, a Toggle, or any other view that requires a label – you should add the labelsHidden() modifier to the view, like this:

Picker("Select a number", selection: $selectedNumber) {
    ForEach(0..<10) {
        Text("\($0)")
    }
}
.labelsHidden()

That still creates the label, but now it doesn’t get shown. As a result, you can put the Picker inside a VStack and add a label of your own choosing.

Tip: If you want all your labels hidden you can apply the labelsHidden() modifier to a VStack or whatever you’re using as your outermost container.

In case you were curious, the wrong way to hide labels is using EmptyView, like this:

Picker(selection: $selectedNumber, label: EmptyView()) {
    ForEach(0..<10) {
        Text("\($0)")
    }
}

Yes, the end result might look the same, but there’s an important reason why using labelsHidden() is much better: the hidden label is still accessible by the screen reader, so even though the text isn’t visible it’s still there to help VoiceOver understand how your UI is structured.

SPONSORED Instabug helps you identify and resolve severe crashes quickly. You can retrace in-app events and know exactly which line of code caused the crash along with environment details, network logs, repro steps, and the session profiler. Ask more questions or keep users up-to-date with in-app replies straight from your dashboard. Instabug takes data privacy seriously, so no one sees your data but you! See more detailed features comparison and try Instabug's crash reporting SDK for free.

Similar solutions…

BUY OUR BOOKS
Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

Average rating: 5.0/5