Text Box

Represents a Material UI styled text box for user input.

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.

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

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

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.

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

Parameters

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

Modifier

Sets the corner radius for the text field.

textBoxCornerRadius(_ cornerRadius: CGFloat)

Example

Displays a basic text box with a title key.

@State private var text: String = ""

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

Displays a text box with a custom system image.

@State private var text: String = ""

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

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

@State private var text: String = ""

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

Displays a default text box with custom border radius.

@State private var text: String = ""

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

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