Hiding Labels In SwiftUI

Make standard controls fit better to your custom user interface

Gabriel Theodoropoulos
3 min readAug 6, 2024
Photo by Miguel Á. Padriñán: https://www.pexels.com/photo/white-product-label-1111319/

SwiftUI provides a variety of views, with a big number of them being actually actionable controls, including buttons, pickers, the toggle, slider, stepper and more. All controls have readable labels, but some of them display their label out of the area that users can interact with. For these controls specifically, it is possible to hide labels when their appearance is not desirable for various reasons. For instance, they might not fit to the look of the rest of the UI, or the control’s function is clear from the context. Managing that is extremely simple thanks to a not so well-known view modifier, details of which are presented right next.

Hiding labels

Consider the following simple implementation that presents a date picker in compact form:

struct ContentView: View {
@State private var selectedDate = Date()

var body: some View {
DatePicker(
“Pick a date”,
selection: $selectedDate,
displayedComponents: .date
)
.padding(.horizontal)
}
}

--

--

Gabriel Theodoropoulos

An iOS & macOS app maker writing code in Swift. Author of countless programming tutorials. Content creator. https://serialcoder.dev