Tesserae - 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.

text-box-sample.cs

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.
        }
    }
}

API reference

class

TextBox

public class TextBox : Input<TextBox>, ITextFormating, IHasBackgroundColor, IHasForegroundColor, IRoundedStyle

A single-line text input component.

Namespace: Tesserae
Inheritance: Input<TextBox> → TextBox
Implements: ITextFormating, IHasBackgroundColor, IHasForegroundColor, IRoundedStyle

Constructors

Name	Description
TextBox	Initializes a new instance of the `TextBox` class.

Constructor

TextBox

public TextBox(string text = string.Empty) : base("text", text)

Initializes a new instance of the TextBox class.

Parameters

text: The initial text.

Properties

Name	Description
Placeholder	Gets or sets the placeholder text.
IsReadOnly	Gets or sets whether the text box is read-only.
MaxLength	Gets or sets the maximum length of the text.
IsPassword	Gets or sets whether the text box is in password mode.
Size	Gets or sets the text size.
Weight	Gets or sets the text weight.
TextAlign	Gets or sets the text alignment.
Background	Gets or sets the background color.
Foreground	Gets or sets the foreground color.

Property

TextBox.Placeholder

public string Placeholder { get ; set ; }

Gets or sets the placeholder text.

Property

TextBox.IsReadOnly

public bool IsReadOnly { get ; set ; }

Gets or sets whether the text box is read-only.

Property

TextBox.MaxLength

public int MaxLength { get ; set ; }

Gets or sets the maximum length of the text.

Property

TextBox.IsPassword

public bool IsPassword { get ; set ; }

Gets or sets whether the text box is in password mode.

Property

TextBox.Size

public virtual TextSize Size { get ; set ; }

Gets or sets the text size.

Property

TextBox.Weight

public virtual TextWeight Weight { get ; set ; }

Gets or sets the text weight.

Property

TextBox.TextAlign

public TextAlign TextAlign { get ; set ; }

Gets or sets the text alignment.

Property

TextBox.Background

public string Background { get ; set ; }

Gets or sets the background color.

Property

TextBox.Foreground

public string Foreground { get ; set ; }

Gets or sets the foreground color.

Methods

Name	Description
SetPlaceholder	Sets the placeholder text.
ReadOnly	Sets the text box as read-only.
Password	Sets the text box to password mode.
NoBorder	Removes the border from the text box.
NoMinWidth	Removes the default minimum width.
UnlockHeight	Unlocks the height restriction.

Method

TextBox.SetPlaceholder

public TextBox SetPlaceholder(string placeholder)

Sets the placeholder text.

Parameters

placeholder: The placeholder text.

Returns

The current instance.

Method

TextBox.ReadOnly

public TextBox ReadOnly()

Sets the text box as read-only.

Method

TextBox.Password

public TextBox Password()

Sets the text box to password mode.

Method

TextBox.NoBorder

public TextBox NoBorder()

Removes the border from the text box.

Method

TextBox.NoMinWidth

public TextBox NoMinWidth()

Removes the default minimum width.

Method

TextBox.UnlockHeight

public TextBox UnlockHeight()

Unlocks the height restriction.

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.

text-box-2-sample.cs

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);
        }
    }
}

TextBox

Description

Usage

API reference

Constructors

TextBox

Parameters

Properties

TextBox.Placeholder

TextBox.IsReadOnly

TextBox.MaxLength

TextBox.IsPassword

TextBox.Size

TextBox.Weight

TextBox.TextAlign

TextBox.Background

TextBox.Foreground

Methods

TextBox.SetPlaceholder

Parameters

Returns

TextBox.ReadOnly

TextBox.Password

TextBox.NoBorder

TextBox.NoMinWidth

TextBox.UnlockHeight

Samples

Basic and Customized TextBox Examples

See also