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.

API reference

class

TextArea

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

A multi-line text input component.

Constructors

Constructor

TextArea

public TextArea(string text = string.Empty)

Initializes a new instance of the class.

Parameters

text: The initial text.

Properties

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.

Methods

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

Samples

Basic TextAreas

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

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

TextArea

Description

API reference

Constructors

TextArea

Parameters

Properties

TextArea.TabIndex

TextArea.IsEnabled

TextArea.IsReadOnly

TextArea.Text

TextArea.Placeholder

TextArea.Error

TextArea.MaxLength

TextArea.IsInvalid

TextArea.IsRequired

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

TextArea.AsObservable

TextArea.AutoResize

Parameters

Returns

Samples

Basic TextAreas

Auto Resize

Validation

See also