Text & number input

AppTextarea

A multi-line field for longer, free-form text — notes, descriptions, scope. The textarea counterpart to AppInput.

<app-textarea label="Notes" name="notes" rows="4"></app-textarea>

<app-textarea> is the shared multi-line field. Reach for it whenever a value can run past a single line — a note, a description, a scope of work, an address block. It carries the same label, hint, error, and required treatment as <app-input>, so a longer answer still reads as one consistent field alongside the rest of the form.

Its look comes entirely from the shared @webority/theme, so the Razor <app-textarea> and the React <AppTextarea> render identically — a field is a field on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the field above it.

<app-textarea label="Notes" name="pg-textarea" placeholder="Add any additional details…"></app-textarea>
error always wins over hintThey share the same slot below the field, so setting both shows only the error — try it above by filling in both fields.

Basic

A labelled multi-line field with a placeholder. Give it a name and the label and control are wired together for you.

A labelled textarea
Show code 
<app-textarea label="Notes" name="notes" rows="4" placeholder="Add any additional details…"></app-textarea>

Sizing

rows sets the initial visible height. Match it to the expected answer — a couple of lines for a short note, more for a full description.

Short and tall
A two-row summary next to a six-row description.
Show code 
<app-textarea label="Summary" name="summary" rows="2" placeholder="One or two lines…"></app-textarea>
<app-textarea label="Description" name="description" rows="6" placeholder="A fuller description…"></app-textarea>
rows is a starting height, not a limitrows sets how tall the field opens; the browser still lets the user scroll or drag to resize. Size it for the typical answer, not the longest possible one.

Auto-grow

Set auto-grow and the height tracks the content — the field never scrolls inside a fixed box. rows sets the starting height; it grows from there as the user types.

Grows as you type
Show code 
<app-textarea label="Notes" name="notes" auto-grow="true" rows="2" placeholder="Type a few lines…" />
auto-grow turns off the manual resize grabberThe height is measured from the content, so the drag handle and scrollbar are hidden — they'd fight the auto height. Drop auto-grow for the manual grabber.

Character count

Set show-count for a live count under the field; add max-length to cap the input and show the denominator. The count turns red at the limit — the same contract as <app-input>.

Live count with a cap
41 / 280
Show code 
<app-textarea label="Bio" name="bio" show-count="true" max-length="280" rows="3" placeholder="Up to 280 characters" />
show-count works with or without max-lengthWithout max-length the counter shows the running length; with it, the field is capped and the count reads count / max, turning red at the limit.

Validation

Show a hint for guidance and an error when validation fails. They share one slot below the field — the error replaces the hint and turns the field red.

Hint and error
Markdown supported.
Description is required.
Show code 
<app-textarea label="Scope of work" name="scope" hint="Markdown supported."></app-textarea>
<app-textarea label="Description" name="description" required error="Description is required."></app-textarea>
Keep the hint short — the error will take its placehint and error occupy the same line, so a set error hides the hint. Treat the hint as brief guidance, not a second label, and make the error say how to fix the problem.

When to use

Use it when

  • The value is free-form text that can run past a single line — a note, description, comment, or address block.
  • You want the same labelled treatment (hint, error, required) as the rest of the form, for a longer answer.
  • The user might write a few words or a few paragraphs and you can't predict which.

Reach for something else when

  • The value is a single short line — a name, email, or reference. → AppInput
  • The user picks from a fixed set of options. → AppSelect
  • It is a search box that filters a list. → AppSearch

Best practices

Do
What the assessment covers.
A visible label stays put while the user types and is read by screen readers.
Don't
A placeholder used as the label vanishes on the first keystroke and fails accessibility.
Do
A height that matches the expected answer keeps the form compact and scannable.
Don't
An oversized box wastes space and signals 'write an essay' when you wanted a sentence.
Do
Add at least one sentence describing the work.
A specific error tells the user exactly what to change.
Don't
Invalid
'Invalid' leaves them guessing what is actually wrong.

Every option

The whole surface of the component, one cell per value — including states a normal example never shows: required, disabled, error + hint together, and a long value overflowing a fixed rows.

rows — every size

rows="2"
rows="4"
rows="6"
rows="10"

auto-grow — off vs on, with overflow content

(default) — fixed rows, scrolls
auto-grow — height fits the content

state

(default)
required
disabled
error
Notes are required.
hint
Markdown supported.
error + hint (error wins)
Notes are required.
required + error
Notes are required.

help — label info-tip

(no help)
help="…" — default help-label
help + custom help-label

label — present vs omitted

(no label) — placeholder only
label="Notes"

Attributes

AttributeTypeDefaultDescription
labelstring—The field label. Always set one — never rely on the placeholder.
namestring—Field name; also used as the id.
auto-growbool—Grow the height to fit the content as the user types.
show-countbool—Show a live count / max-length under the field.
max-lengthint—Character cap; the count turns red as it is approached.
rowsint4Initial visible height, in text rows.
placeholderstring—Placeholder text shown while the field is empty.
valuestring—Pre-filled content of the textarea.
requiredboolfalseAppends a required mark to the label.
hintstring—Helper text below the field. Hidden while an error is shown.
errorstring—Error message. Turns the field red and replaces the hint.
helpstring—Info-tip content shown beside the label (React help).
help-labelstringMore informationaria-label for the info-tip button (React helpLabel).
idstring—Explicit control id. Defaults to name (React id).
classstring—Extra classes on the .field wrapper (React fieldClassName).
input-classstring—Extra classes on the control itself (the textarea) — the React className counterpart. The plain class attribute merges onto the .field wrapper instead.