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.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            new TextBoxUsageSample().Run();
        }
    }

    public class TextBoxUsageSample
    {
        public void Run()
        {
            // 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 H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = 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)
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

See also

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