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

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.

Constructors

Constructor

TextBox

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

Initializes a new instance of the class.

Parameters

text: The initial text.

Properties

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

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

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

TextBox

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

Referenced by