Secure Text Box

Represents a Material UI styled text box for secure fields.

Overview

SecureTextBox provides a secure text input field with Material UI styling, useful for handling sensitive information.

To use the SecureTextBox, initialize it with a title key and a binding to manage the text value. You can also optionally provide a system symbol for the field and a custom background color.

Initializers

Creates a default secure text box with a title key and text binding.

SecureTextBox(_ titleKey: String, text: Binding<String>)

Creates a secure text box with a system symbol and a title key.

SecureTextBox(
    systemImage: String,
    _ titleKey: String,
    text: Binding<String>
)

Creates a secure text box with a system symbol, title key, text binding, and a custom background color.

SecureTextBox(
    systemImage: String,
    _ titleKey: String,
    text: Binding<String>,
    background: Color
)

Parameters

Parameter	Description
systemImage	System symbol to be displayed in the secure field.
titleKey	Title displayed inside the secure text field.
text	Binding to the text value of the secure field.
background	Custom background color for the secure field.

Modifier

Sets the corner radius for the secure text field.

secureTextBoxCornerRadius(_ cornerRadius: CGFloat)

Example

Displays a basic secure text box with a title key.

@State private var password: String = ""

var body: some View {
    Container {
        SecureTextBox("Password", text: $password)
    }
}

Displays a secure text box with a custom system image.

@State private var text: password = ""

var body: some View {
    Container {
        SecureTextBox(systemImage: "eye.fill", "Password", text: $password)
    }
}

Displays a secure text box with a custom system image and custom background.

@State private var text: password = ""

var body: some View {
    Container {
        SecureTextBox(systemImage: "eye.fill", "Password", text: $password, background: .materialUISecondaryBackground)
    }
}

Displays a default secure text box with custom border radius.

@State private var password: String = ""

var body: some View {
    Container {
        SecureTextBox("Password", text: $password)
            .secureTextBoxCornerRadius(.infinity)
    }
}

SecureTextBox uses the default configuration’s corner radius if a custom value is not specified.