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 Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Stack().W(320).Children(
                // Basic TextBox
                TextBox().SetPlaceholder("Please enter text here"),
                // Disabled TextBox
                TextBox("I am disabled").Disabled(),
                // Read-only TextBox
                TextBox("I am read-only").ReadOnly(),
                // Password TextBox
                TextBox("I am a password box").Password(),
                // TextBox in an error / required state
                TextBox().Error("Error message").IsInvalid()
            );

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

API reference

class

TextBox

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

A single-line text input component.

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

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.
IsAI	Whether `AI` is on.
IsDictating	True while the microphone button is listening.
IsEditable
CanDictate
IsSpinning	Whether a `SpinWhileAsync` action is running.

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.

Property

TextBox.IsAI

public bool IsAI

Whether AI is on.

Property

TextBox.IsDictating

public bool IsDictating

True while the microphone button is listening.

Property

TextBox.IsEditable

public bool IsEditable

Property

TextBox.CanDictate

public bool CanDictate

Property

TextBox.IsSpinning

public bool IsSpinning

Whether a SpinWhileAsync action is running.

Methods

Name	Description
SetPlaceholder	Sets the placeholder text.
ReadOnly	Sets the text box as read-only.
Password	Sets the text box to password mode.
Email	Sets the text box input type to `email`.
Name	Sets the `name` attribute on the underlying input. Password managers and browser autofill heuristics use this to identify the field's role (e.g. `username`, `password`, `email`) and to scope saved credentials to the current origin.
AutoComplete	Sets the `autocomplete` attribute on the underlying input. Use values from the WHATWG autofill spec (`username`, `email`, `current-password`, `new-password`, `one-time-code`, `off`, ...). Password managers rely on this hint to distinguish sign-in flows from password-creation flows.
NoBorder	Removes the border from the text box, in every state: no hover edge and no focus ring, for an input set inside a box that draws its own.
NoMinWidth	Removes the default minimum width.
UnlockHeight	Unlocks the height restriction.
AI	Marks the text box as holding what a model wrote - a generated title, a suggested value: the field takes the AI tint and an accent edge, and a spinner shown by `SpinWhileAsync` takes the AI arc. Turn it off again (`AI(false)`) when the value stops being the model's, e.g. once the user types over it.
WithDictation	Adds a microphone button at the end of the field, as an `OmniBox` has with `DictationButton`: pressing it dictates after the text already in the field, pressing it again stops, and what was heard stays. The words come from `provider`, else `Provider`, else the browser's speech recognition; the button is not shown when none is available.
DictationSource	Sets where this field's dictation gets its words from, instead of `Provider`, without adding the microphone button: for a field that is dictated into from elsewhere (see `DictationTargets`).
StartDictation	Starts dictating, as pressing the microphone button does. Does nothing when already dictating or when nothing can supply words, and works whether or not `WithDictation` was called.
StopDictation	Stops dictating; what was heard stays in the field.
GetDictation	The dictation of this field, made on first use so a field that never dictates carries none.
SpinWhileAsync	Shows a spinner inside the text box, at its end, while `action` runs - the text box's equivalent of `OnClickSpinWhile`. The spinner goes when the action ends, whether it finished or threw (the exception is not swallowed). Overlapping calls share one spinner, which stays until the last of them ends. The field stays editable meanwhile.

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

public TextBox Email()

Sets the text box input type to email.

Method

TextBox.Name

public TextBox Name(string name)

Sets the name attribute on the underlying input. Password managers and browser autofill heuristics use this to identify the field's role (e.g. username, password, email) and to scope saved credentials to the current origin.

Method

TextBox.AutoComplete

public TextBox AutoComplete(string value)

Sets the autocomplete attribute on the underlying input. Use values from the WHATWG autofill spec (username, email, current-password, new-password, one-time-code, off, ...). Password managers rely on this hint to distinguish sign-in flows from password-creation flows.

Method

TextBox.NoBorder

public TextBox NoBorder()

Removes the border from the text box, in every state: no hover edge and no focus ring, for an input set inside a box that draws its own.

Method

TextBox.NoMinWidth

public TextBox NoMinWidth()

Removes the default minimum width.

Method

TextBox.UnlockHeight

public TextBox UnlockHeight()

Unlocks the height restriction.

Method

TextBox.AI

public TextBox AI(bool value = true, bool strongEffect = false)

Marks the text box as holding what a model wrote - a generated title, a suggested value: the field takes the AI tint and an accent edge, and a spinner shown by SpinWhileAsync takes the AI arc. Turn it off again (AI(false)) when the value stops being the model's, e.g. once the user types over it.

Parameters

value: Whether the AI look is on.
strongEffect: Asks for the louder form of the AI styling (tss-ai-strong); see the ai-variants reference.

Method

TextBox.WithDictation

public TextBox WithDictation(DictationProvider provider = null)

Adds a microphone button at the end of the field, as an OmniBox has with DictationButton: pressing it dictates after the text already in the field, pressing it again stops, and what was heard stays. The words come from provider, else Provider, else the browser's speech recognition; the button is not shown when none is available.

Parameters

provider: The source of this field's dictation, instead of the application-wide one.

Method

TextBox.DictationSource

public TextBox DictationSource(DictationProvider provider)

Sets where this field's dictation gets its words from, instead of Provider, without adding the microphone button: for a field that is dictated into from elsewhere (see DictationTargets).

Method

TextBox.StartDictation

public TextBox StartDictation()

Starts dictating, as pressing the microphone button does. Does nothing when already dictating or when nothing can supply words, and works whether or not WithDictation was called.

Method

TextBox.StopDictation

public TextBox StopDictation()

Stops dictating; what was heard stays in the field.

Method

TextBox.GetDictation

private DictationController GetDictation()

The dictation of this field, made on first use so a field that never dictates carries none.

Method

TextBox.SpinWhileAsync

Overload
SpinWhileAsync(Func<Task>)	Shows a spinner inside the text box, at its end, while `action` runs - the text box's equivalent of `OnClickSpinWhile`. The spinner goes when the action ends, whether it finished or threw (the exception is not swallowed). Overlapping calls share one spinner, which stays until the last of them ends. The field stays editable meanwhile.
SpinWhileAsync<T>(Func<Task<T>>)	`SpinWhileAsync` for an action with a result, which is handed back.

SpinWhileAsync(Func<Task>)

public async Task SpinWhileAsync(Func<Task> action)

Shows a spinner inside the text box, at its end, while action runs - the text box's equivalent of OnClickSpinWhile. The spinner goes when the action ends, whether it finished or threw (the exception is not swallowed). Overlapping calls share one spinner, which stays until the last of them ends. The field stays editable meanwhile.

Parameters

action Func<Task>

SpinWhileAsync<T>(Func<Task<T>>)

public async Task<T> SpinWhileAsync<T>(Func<Task<T>> action)

SpinWhileAsync for an action with a result, which is handed back.

Parameters

action Func<Task<T>>

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 Transpose.Core;
using Tesserae;
using static Transpose.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

TextBox.IsAI

TextBox.IsDictating

TextBox.IsEditable

TextBox.CanDictate

TextBox.IsSpinning

Methods

TextBox.SetPlaceholder

Parameters

Returns

TextBox.ReadOnly

TextBox.Password

TextBox.Email

TextBox.Name

TextBox.AutoComplete

TextBox.NoBorder

TextBox.NoMinWidth

TextBox.UnlockHeight

TextBox.AI

Parameters

TextBox.WithDictation

Parameters

TextBox.DictationSource

TextBox.StartDictation

TextBox.StopDictation

TextBox.GetDictation

TextBox.SpinWhileAsync

SpinWhileAsync(Func<Task>)

Parameters

SpinWhileAsync<T>(Func<Task<T>>)

Parameters

Samples

Basic and Customized TextBox Examples

See also