# Text Box

### Overview

`TextBox` provides a  text input field with Material UI styling, useful for handling form. It offers a variety of initialization options including the ability to add a system symbol and a custom background color.

To use the `TextBox`, initialize it with a title key and a binding to manage the text value. 

### Initializers

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

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

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

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

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

```swift
TextBox(
    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 text box.</td></tr><tr><td><code>titleKey</code></td><td>Title displayed inside the text box.</td></tr><tr><td><code>text</code></td><td>Binding to the text value of the text box.</td></tr><tr><td><code>background</code></td><td>Custom background color for the text box.</td></tr></tbody></table>

### Modifier

Sets the corner radius for the text field.

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

### Example

Displays a basic text box with a title key.

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

var body: some View {
    Container {
        TextBox("Enter Text", text: $text)
    }
}
```

<figure><picture><source srcset="/files/T36FUuU0NCncyBMe32PC" media="(prefers-color-scheme: dark)"><img src="/files/lKKfg5Ga0rEqwcXP4FKE" alt=""></picture><figcaption></figcaption></figure>

Displays a text box with a custom system image.

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

var body: some View {
    Container {
        TextBox(systemImage: "pencil", "Enter text", text: $text)
    }
}
```

<figure><picture><source srcset="/files/SidOHJ619Y3rupdlnsWZ" media="(prefers-color-scheme: dark)"><img src="/files/4m8lELahmIWfuw3QhcA0" alt=""></picture><figcaption></figcaption></figure>

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

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

var body: some View {
    Container {
        TextBox(systemImage: "pencil", "Enter text", text: $text, background: .materialUISecondaryBackground)
    }
}
```

<figure><picture><source srcset="/files/SidOHJ619Y3rupdlnsWZ" media="(prefers-color-scheme: dark)"><img src="/files/4m8lELahmIWfuw3QhcA0" alt=""></picture><figcaption></figcaption></figure>

Displays a default text box with custom border radius.

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

var body: some View {
    Container {
        TextBox("Enter Text", text: $text)
            .textBoxCornerRadius(.infinity)
    }
}
```

<figure><picture><source srcset="/files/I48fAybpFnydjcTSEQNs" media="(prefers-color-scheme: dark)"><img src="/files/AnIqRJQgEOIixuaQjcEY" alt=""></picture><figcaption></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://swift-packages.gitbook.io/materialuikit/components/text-box.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.