SecureField

struct · iOS 13.0+ · SDK 27.1

nonisolated struct SecureField<Label> where Label : View

A control into which people securely enter private text. Use a secure field when you want the behavior of a ``TextField``, but you want to hide the field's text. Typically, you use this for entering passwords and other sensitive information, as the second field in the following screenshot demonstrates: @TabNavigator { @Tab("macOS") { @Image(source: "SecureField-1-macOS", alt: "Two vertically arranged wide rectangles filled with text. The first displays the email address mruiz2@icloud.com, and the second displays eight heavey dots in place of characters.") } @Tab("iOS") { @Image(source: "SecureField-1-iOS", alt: "Two vertically arranged wide rectangles filled with text. The first displays the email address mruiz2@icloud.com, and the second displays eight heavey dots in place of characters.") } } The field: * Displays one dot for each character someone types. * Hides the dots when someone takes a screenshot in iOS. * Prevents anyone from cutting or copying the field's contents. * Displays an indicator when Caps Lock is enabled. ### Bind to a string A secure field binds to a string value and updates the string on every keystroke or other edit, so you can read its value at any time from elsewhere in your code. The following code shows how to create the above interface, with the secure field bound to a `password` string: @State private var username: String = "" @State private var password: String = "" var body: some View { VStack { TextField("Username", text: $username) .autocorrectionDisabled(true) #if !os(macOS) .textInputAutocapitalization(.never) #endif SecureField("Password", text: $password) .onSubmit { handleLogin(username: username, password: password) } } .textFieldStyle(.roundedBorder) } The field in the above example has an ``View/onSubmit(of:_:)`` modifier that sends the `username` and `password` strings to a custom `handleLogin(username:password:)` method if someone presses the Return key while the secure field has focus. You can alternatively provide another mechanism --- like a button --- to do the same thing. ### Guide people with a prompt In addition to the string or view that you provide as a label, you can also provide a ``Text`` view prompt to help guide someone who uses the field, as the following ``Form`` does: Form { TextField(text: $username, prompt: Text("Required")) { Text("Username") } .autocorrectionDisabled(true) #if !os(macOS) .textInputAutocapitalization(.never) #endif SecureField(text: $password, prompt: Text("Required")) { Text("Password") } } The system uses the label and prompt in different ways depending on the context. For example, a form in macOS places the label against the leading edge of the field and uses the prompt as placeholder text inside the field. The same form in iOS also uses the prompt as placeholder text, but doesn't display the label: @TabNavigator { @Tab("macOS") { @Image(source: "SecureField-2-macOS", alt: "Two vertically wide rectangles filled with the string Required. The string appears in a secondary color. The word Username appear to the left of the top rectangle, and the word Password appears to the left of the bottom rectangle. The two words are right aligned with each other.") } @Tab("iOS") { @Image(source: "SecureField-2-iOS", alt: "A wide rectangle that's divided in half vertically by a horizontal dividing line. The two halves of the rectangle, both top and bottom, have the word Required in them. The words are aligned with each other, and appear near the left side of the rectangle. The words and the dividing line appear in a light gray color.") } } If you remove the prompt from the previous example, the field keeps the label on the leading edge and omits the placeholder text in macOS, but displays the label as a placeholder in iOS: @TabNavigator { @Tab("macOS") { @Image(source: "SecureField-3-macOS", alt: "Two vertically wide, empty rectangles. The word Username appear to the left of the top rectangle, and the word Password appears to the left of the bottom rectangle. The two words are right aligned with each other.") } @Tab("iOS") { @Image(source: "SecureField-3-iOS", alt: "A wide rectangle that's divided in half vertically by a horizontal dividing line. The two halves of the rectangle, both top and bottom, have a word in them. The top half has the word Username, and the bottom half has the word Password. The words are aligned with each other, and appear near the left side of the rectangle. The words and the dividing line appear in a light gray color.") } }

Members (0)

This type has no directly callable members in this snapshot. See the framework’s skipped declarations for unsupported APIs.

All SwiftUI types →