Components

Textarea

Several lines of text, for comments, descriptions and feedback: four rows unless you say otherwise, or as tall as what is typed in it.

Drawn and behaving as Flux UI's textarea does, measured against its live docs.

Textarea

TextareaExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextareaExample : Component
{
    protected override Component? Render() =>
        Ui.Textarea.Of<string>().Class("max-w-sm");
}

Live result

With placeholder

A hint inside the box on what to write, and a label over it.

TextareaPlaceholderExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextareaPlaceholderExample : Component
{
    private string _notes = "";

    protected override Component? Render() =>
        Div.Class("max-w-sm space-y-3")[
            Ui.Textarea.Value(_notes).Label("Order notes").Placeholder("No lettuce, tomato, or onion...")
                .OnChange(notes => { _notes = notes; }),
            Ui.Text.Data("testid", "ui-textarea-state")[_notes.Length == 0 ? "No notes yet." : $"Notes: {_notes}"]
        ];
}

Live result

Order notes

No notes yet.

Fixed row height

TextareaRowsExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextareaRowsExample : Component
{
    protected override Component? Render() =>
        Ui.Textarea.Of<string>().Rows(2).Label("Note").Class("max-w-sm");
}

Live result

Note

Auto-sizing textarea

Rows(UiTextareaRows.Auto) grows with what is typed. It is CSS's field-sizing, which not every browser has yet: elsewhere it keeps its height.

TextareaAutoExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextareaAutoExample : Component
{
    protected override Component? Render() =>
        Ui.Textarea.Of<string>().Rows(UiTextareaRows.Auto).Placeholder("This textarea will adjust to fit the content...")
            .Class("max-w-sm");
}

Live result

Configure resize

Which way the reader may drag it: down, not at all, across, or both.

TextareaResizeExample.cs

namespace Rask.Site.Features.UiDocs.Examples;

public sealed partial class TextareaResizeExample : Component
{
    protected override Component? Render() =>
        Div.Class("grid max-w-sm gap-4")[
            Ui.Textarea.Of<string>().Vertical.Placeholder("Resize \"vertical\""),
            Ui.Textarea.Of<string>().None.Placeholder("Resize \"none\""),
            Ui.Textarea.Of<string>().Horizontal.Placeholder("Resize \"horizontal\""),
            Ui.Textarea.Of<string>().Both.Placeholder("Resize \"both\"")
        ];
}

Live result

Behaviour

Its height

Four rows unless Rows says otherwise. Rows(UiTextareaRows.Auto) is field-sizing: content: the box grows with each line, with no script, in the browsers that have it. Resize is the CSS resize the reader drags with: Vertical when unset, Horizontal, Both or None, each a step of its own.

Its value

A textarea is bound like an input: Bind(() => m.Notes) writes with the reader's next action, and Value(notes).OnChange(…) leaves the text with the page. Label, Description, DescriptionTrailing and Badge draw the field around it, with the bound member's message, and a bound textarea is marked invalid while that member holds one.

Reference

`Ui.Textarea`

flux:textarea

Several lines of text.

Step	Takes	What it does
`.Bind(…)`	() => a T	The model's member it reads and writes: () => m.Notes. Or Value with OnChange.
`.Value(…)`	T, the type it edits	What it holds, for a page that holds it itself.
`.OnChange(…)`	a handler given the new value	Runs with the new text when it is committed.
`.AfterBind(…)`	a handler given the new value	Runs after Bind has written the model.
`.Validate(…)`	a validator	A rule the value is checked by when it is written.
`.Live()`	`bool`	Writes the model as it is typed, after a pause: Flux's wire:model.live.
`.Blur()`	`bool`	Writes the model when the reader leaves the field.
`.Debounce(…)`	a TimeSpan: 300.Milliseconds	Writes the model once typing has paused this long.
`.OnInput(…)`	a handler given the new value	Runs at every keystroke with the text as typed.
`.Label(…)`	`string`	Draws a field around it, with this label and the error.
`.Description(…)`	`string`	Help text between the label and the textarea.
`.DescriptionTrailing(…)`	`string`	Help text under the textarea.
`.Badge(…)`	`string`	A word beside the label: "Optional".
`.Placeholder(…)`	`string`	Shown while it is empty.
`.Rows(…)`	an int, or UiTextareaRows.Auto	How many lines tall it is, or UiTextareaRows.Auto to grow with the text. Four when unset.
`.Resize(…)`	`Ui.TextareaResize` Vertical Horizontal Both None Each is a step of its own too, unless an HTML tag has its name.	Which way the reader may drag it. Down when unset.
`.Invalid()`	`bool`	Error styling the form did not ask for.
`.Disabled()`	`bool`	Dims it and takes it out of reach.
`.ReadOnly()`	`bool`	May be read and copied, not changed.
`.ShowValidation()`	`bool`	False leaves the member's message to a Ui.Error placed elsewhere.