# Text Box

## TextBox

### Description
The TextBox component enables users to input text data in your application. It is designed for use in forms or any area where textual input is required. As part of the Components group, it provides a simple and uniform way to collect string inputs, with additional customization options for placeholders, read-only modes, password inputs, and styling.

### Usage
To use the TextBox component, import the Tesserae UI library and instantiate it using the static helper method. The following sample demonstrates how to create basic TextBox instances including a standard, disabled, read-only, password, and required state.

```csharp
using System;
using Tesserae;
using static Tesserae.UI;

public class TextBoxUsageSample
{
    public static void Main()
    {
        // Basic TextBox
        var standardTextBox = TextBox();

        // Disabled TextBox
        var disabledTextBox = TextBox("I am disabled").Disabled();

        // Read-Only TextBox
        var readOnlyTextBox = TextBox("I am read-only").ReadOnly();

        // Password TextBox
        var passwordTextBox = TextBox("I am a password box").Password();

        // TextBox with placeholder and error indication
        var placeholderTextBox = TextBox().SetPlaceholder("Please enter text here");
        var errorTextBox = TextBox().Error("Error message").IsInvalid();

        // Render or add the components to your layout as needed.
    }
}

# Methods

SetPlaceholder(string placeholder) : TextBox
Sets the placeholder text shown when the input is empty.
ReadOnly() : TextBox
Configures the TextBox to be read-only, preventing user modification.
Password() : TextBox
Sets the TextBox to mask the input text like a password field.
NoBorder() : TextBox
Removes the border from the TextBox for a cleaner look.
NoMinWidth() : TextBox
Removes the default minimum width set by the browser’s size attribute.
UnlockHeight() : TextBox
Allows the TextBox to adjust its height freely by removing default restrictions.

# Properties

Placeholder (string)
Gets or sets the placeholder text of the input element.
IsReadOnly (bool)
Gets or sets a value indicating whether the TextBox is in read-only mode.
MaxLength (int)
Gets or sets the maximum length for the input text.
IsPassword (bool)
Gets or sets a value indicating whether the TextBox is in password mode. When true, input characters are masked.
Size (TextSize)
Gets or sets the font size applied to the TextBox. It leverages predefined text sizes (e.g., Small).
Weight (TextWeight)
Gets or sets the font weight applied to the TextBox, such as Regular.
TextAlign (TextAlign)
Gets or sets the alignment of the text within the TextBox (e.g., Left, Center, Right).
Background (string)
Gets or sets the background color of the TextBox via the style's background property.
Foreground (string)
Gets or sets the text color of the TextBox via the style's color property.

# Samples

# Basic and Customized TextBox Examples

The following sample demonstrates creating multiple TextBox variations including standard, disabled, read-only, password input, required state, error messaging, placeholder text, and validation options.

using System;
using Tesserae;
using static Tesserae.UI;

public class TextBoxSampleUsage
{
    public HTMLElement Render()
    {
        return SectionStack()
            .Title("TextBox Component Overview")
            .Section(Stack().Children(
                TextBlock("Standard TextBox:"),
                TextBox(),
                TextBlock("Disabled TextBox:"),
                TextBox("I am disabled").Disabled(),
                TextBlock("Read-only TextBox:"),
                TextBox("I am read-only").ReadOnly(),
                TextBlock("Password TextBox:"),
                TextBox("I am a password box").Password(),
                TextBlock("TextBox with placeholder:"),
                TextBox().SetPlaceholder("Enter text here"),
                TextBlock("TextBox with error message:"),
                TextBox().Error("Error message").IsInvalid(),
                TextBlock("TextBox with validation:"),
                TextBox().Validation((tb) => tb.Text.Length == 0 ? "Empty" : null)
            ))
            .Render();
    }
}

# See also

Label – Frequently used together with TextBox for providing descriptive text.
Button – Often paired with TextBox when used in forms for submitting data.