Tesserae

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