# Secure Text Box

### 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="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FHK5Be5auEAVQliYgWJiR%2FDefault%20SecureTextField%20Dark.png?alt=media&#x26;token=c82a6462-254b-405e-951f-c1e3fa4c05d3" 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&#x26;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="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2F94zaIxFkM90ehZMguElM%2FSecurefield%20With%20SF%20Symbol%20Dark.png?alt=media&#x26;token=195d4dc7-92b5-4e32-9f3f-9731c0200e76" 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&#x26;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="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2F94zaIxFkM90ehZMguElM%2FSecurefield%20With%20SF%20Symbol%20Dark.png?alt=media&#x26;token=195d4dc7-92b5-4e32-9f3f-9731c0200e76" 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&#x26;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="https://2931569195-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHpwjDgYAa64eKF8AGmeE%2Fuploads%2FpUJbyYTAZwj0NF3zrx6v%2FSecure%20Textfield%20Custom%20Cornerradius%20Dark.png?alt=media&#x26;token=1dafc255-9d30-44e4-a75a-a1fb75399b10" 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&#x26;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.