Tesserae - Text Area

TextArea

Description

A control to input multiple lines of text

TextAreas allow users to enter and edit multi-line text. They are commonly used for comments, descriptions, or any input that requires multiple lines of text.

Samples

Basic TextAreas

text-area-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 = VStack().Children(
                Label("Standard").SetContent(TextArea()),
                Label("Placeholder").SetContent(TextArea().SetPlaceholder("Enter your description...")),
                Label("Disabled").Disabled().SetContent(TextArea("Disabled content").Disabled()),
                Label("Read-only").SetContent(TextArea("Read-only content").ReadOnly())
            );

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

Auto Resize

text-area-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 = VStack().Children(
                Label("AutoResize (allowShrink = true)").SetContent(TextArea("Type multiple lines here...").AutoResize(allowShrink: true)),
                Label("AutoResize (allowShrink = false)").SetContent(TextArea("Type multiple lines here...").AutoResize(allowShrink: false)),
                Label("AutoResize (minHeight = 100)").SetContent(TextArea("Type here...").AutoResize(minHeight: 100)),
                Label("AutoResize (maxHeight = 150)").SetContent(TextArea("Type many lines to see scrolling...").AutoResize(maxHeight: 150))
            );

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

Validation

text-area-3-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 = VStack().Children(
                Label("Required").Required().SetContent(TextArea()),
                Label("Custom Error").SetContent(TextArea().Error("Something went wrong").IsInvalid())
            );

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

API reference

class

TextArea

public sealed class TextArea : ComponentBase<TextArea, HTMLTextAreaElement>, ICanValidate<TextArea>, IBindableComponent<string>, ITabIndex, IRoundedStyle, IDictationTarget

A multi-line text input component.

Namespace: Tesserae
Inheritance: ComponentBase<TextArea, HTMLTextAreaElement> → TextArea
Implements: ICanValidate<TextArea>, IBindableComponent<string>, ITabIndex, IRoundedStyle, IDictationTarget

Constructors

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

Constructor

TextArea

public TextArea(string text = string.Empty)

Initializes a new instance of the TextArea class.

Parameters

text: The initial text.

Properties

Name	Description
TabIndex	Gets or sets the tab index.
IsEnabled	Gets or sets whether the component is enabled.
IsReadOnly	Gets or sets whether the component is read-only.
Text	Gets or sets the text in the text area.
Placeholder	Gets or sets the placeholder text.
Error	Gets or sets the error message.
MaxLength	Gets or sets the maximum length of the text.
IsInvalid	Gets or sets whether the component is in an invalid state.
IsRequired	Gets or sets whether the component is required.
IsDictating	True while the microphone button is listening.
IsEditable
CanDictate

Property

TextArea.TabIndex

public int TabIndex { set ; }

Gets or sets the tab index.

Property

TextArea.IsEnabled

public bool IsEnabled { get ; set ; }

Gets or sets whether the component is enabled.

Property

TextArea.IsReadOnly

public bool IsReadOnly { get ; set ; }

Gets or sets whether the component is read-only.

Property

TextArea.Text

public string Text { get ; set ; }

Gets or sets the text in the text area.

Property

TextArea.Placeholder

public string Placeholder { get ; set ; }

Gets or sets the placeholder text.

Property

TextArea.Error

public string Error { get ; set ; }

Gets or sets the error message.

Property

TextArea.MaxLength

public int MaxLength { get ; set ; }

Gets or sets the maximum length of the text.

Property

TextArea.IsInvalid

public bool IsInvalid { get ; set ; }

Gets or sets whether the component is in an invalid state.

Property

TextArea.IsRequired

public bool IsRequired { get ; set ; }

Gets or sets whether the component is required.

Property

TextArea.IsDictating

public bool IsDictating

True while the microphone button is listening.

Property

TextArea.IsEditable

public bool IsEditable

Property

TextArea.CanDictate

public bool CanDictate

Methods

Name	Description
Render	Renders the component.
Attach	Attaches a handler to the input updated event.
SetText	Sets the text of the text area.
ClearText	Clears the text.
SetPlaceholder	Sets the placeholder text.
Disabled	Sets whether the component is disabled.
ReadOnly	Sets the component as read-only.
NoSpellCheck	Disables spell check.
Required	Sets the component as required.
WithDictation	Adds a microphone button in the corner of the text area, 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 text area.
GetDictation	The dictation of this field, made on first use so a field that never dictates carries none.
Focus	Sets focus to the text area.
AsObservable	Returns an observable of the text.
SetBoundValue	Programmatically updates the text area as part of a two-way binding (DOM input event is not raised).
AutoResize	Enables auto-resizing of the text area as the user types, based on the scrollHeight.

Method

TextArea.Render

public override HTMLElement Render()

Renders the component.

Returns

The rendered HTML element.

Method

TextArea.Attach

public void Attach(ComponentEventHandler<TextArea> handler)

Attaches a handler to the input updated event.

Parameters

handler: The handler.

Method

TextArea.SetText

public TextArea SetText(string text)

Sets the text of the text area.

Parameters

text: The text.

Returns

The current instance.

Method

TextArea.ClearText

public TextArea ClearText()

Clears the text.

Returns

The current instance.

Method

TextArea.SetPlaceholder

public TextArea SetPlaceholder(string placeholder)

Sets the placeholder text.

Parameters

placeholder: The placeholder text.

Returns

The current instance.

Method

TextArea.Disabled

public TextArea Disabled(bool value = true)

Sets whether the component is disabled.

Parameters

value: Whether it's disabled.

Returns

The current instance.

Method

TextArea.ReadOnly

public TextArea ReadOnly()

Sets the component as read-only.

Method

TextArea.NoSpellCheck

public TextArea NoSpellCheck()

Disables spell check.

Method

TextArea.Required

public TextArea Required()

Sets the component as required.

Method

TextArea.WithDictation

public TextArea WithDictation(DictationProvider provider = null)

Adds a microphone button in the corner of the text area, 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

TextArea.DictationSource

public TextArea 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

TextArea.StartDictation

public TextArea 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

TextArea.StopDictation

public TextArea StopDictation()

Stops dictating; what was heard stays in the text area.

Method

TextArea.GetDictation

private DictationController GetDictation()

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

Method

TextArea.Focus

public TextArea Focus()

Sets focus to the text area.

Method

TextArea.AsObservable

public IObservable<string> AsObservable()

Returns an observable of the text.

Method

TextArea.SetBoundValue

public void SetBoundValue(string value)

Programmatically updates the text area as part of a two-way binding (DOM input event is not raised).

Method

TextArea.AutoResize

public TextArea AutoResize(bool allowShrink = true, int? minHeight = null, int? maxHeight = null)

Enables auto-resizing of the text area as the user types, based on the scrollHeight.

Parameters

allowShrink: If false, the text area will not shrink below its initial size.
minHeight: If set, specifies a minimum pixel height for the text area.
maxHeight: If set, specifies a maximum pixel height for the text area. Content will scroll if it exceeds this height.

Returns

The current instance.

TextArea

Description

Samples

Basic TextAreas

Auto Resize

Validation

API reference

Constructors

TextArea

Parameters

Properties

TextArea.TabIndex

TextArea.IsEnabled

TextArea.IsReadOnly

TextArea.Text

TextArea.Placeholder

TextArea.Error

TextArea.MaxLength

TextArea.IsInvalid

TextArea.IsRequired

TextArea.IsDictating

TextArea.IsEditable

TextArea.CanDictate

Methods

TextArea.Render

Returns

TextArea.Attach

Parameters

TextArea.SetText

Parameters

Returns

TextArea.ClearText

Returns

TextArea.SetPlaceholder

Parameters

Returns

TextArea.Disabled

Parameters

Returns

TextArea.ReadOnly

TextArea.NoSpellCheck

TextArea.Required

TextArea.WithDictation

Parameters

TextArea.DictationSource

TextArea.StartDictation

TextArea.StopDictation

TextArea.GetDictation

TextArea.Focus

TextArea.AsObservable

TextArea.SetBoundValue

TextArea.AutoResize

Parameters

Returns

See also