> For the complete documentation index, see [llms.txt](https://swift-packages.gitbook.io/materialuikit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://swift-packages.gitbook.io/materialuikit/components/secure-text-box.md).

# 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.

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

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

```swift
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.

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

### Parameters

<table data-header-hidden><thead><tr><th width="206"></th><th></th></tr></thead><tbody><tr><td><strong>Parameter</strong></td><td><strong>Description</strong></td></tr><tr><td><code>systemImage</code></td><td>System symbol to be displayed in the secure field.</td></tr><tr><td><code>titleKey</code></td><td>Title displayed inside the secure text field.</td></tr><tr><td><code>text</code></td><td>Binding to the text value of the secure field.</td></tr><tr><td><code>background</code></td><td>Custom background color for the secure field.</td></tr></tbody></table>

### Modifier

Sets the corner radius for the secure text field.

```swift
secureTextBoxCornerRadius(_ cornerRadius: CGFloat)
```

### Example

Displays a basic secure text box with a title key.

```swift
@State private var password: String = ""

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

<figure><picture><source srcset="/files/q3FyXdjEPqagGNRz62LS" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FqBBF1HEsRTKxRK8vYfUf%2FDefault%20SecureTextField%20Light2.png?alt=media&amp;token=a2d01e16-1a8a-4c00-8c4d-13d6732dd1c3" alt=""></picture><figcaption></figcaption></figure>

Displays a secure text box with a custom system image.

```swift
@State private var text: password = ""

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

<figure><picture><source srcset="/files/XVyqiA1H2sZGpML610ri" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FjLHk2njKicl2XOHX4HQr%2FSecurefield%20With%20SF%20Symbol%20Light.png?alt=media&amp;token=52051f74-c0cd-401d-9aaf-1839950921f2" alt=""></picture><figcaption></figcaption></figure>

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

```swift
@State private var text: password = ""

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

<figure><picture><source srcset="/files/XVyqiA1H2sZGpML610ri" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FjLHk2njKicl2XOHX4HQr%2FSecurefield%20With%20SF%20Symbol%20Light.png?alt=media&amp;token=52051f74-c0cd-401d-9aaf-1839950921f2" alt=""></picture><figcaption></figcaption></figure>

Displays a default secure text box with custom border radius.

```swift
@State private var password: String = ""

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

<figure><picture><source srcset="/files/g2el7EbOVLwNWG4xYijC" media="(prefers-color-scheme: dark)"><img src="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FVOrYsJzWaRlUxiOVmZGG%2FSecure%20Textfield%20Custom%20Cornerradius%20Light.png?alt=media&amp;token=4e2ff0d6-b7a5-4a32-b701-ba46b3511d8f" alt=""></picture><figcaption></figcaption></figure>

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