elements
Manual UI Templates Textarea

Textarea

elements man ui/templates/textarea

A native multi-line input that grows with its content, between rows and maxRows.

Example
import { Textarea } from "@elements/ui/textarea";

<Textarea value={form.bio} placeholder="Tell us about yourself" />
<Textarea value={form.notes} rows={2} maxRows={8} />
<Textarea value={form.code} autosize={false} rows={10} resize="both" />

Parts

Part What it is
.textarea The <textarea>. class="textarea is-autosize" works without the template in browsers with field-sizing.

Attributes

Attribute Type Default Description
value string (two-way) "" The text. Bind it to state; typing writes back.
rows number 3 Minimum height in lines.
maxRows number 0 Stops growing at this many lines and scrolls. 0 is no limit.
autosize boolean true Grows with its content.
resize "none" | "vertical" | "both" "vertical" The user's resize handle.
size "sm" | "md" | "lg" "md" Type size and padding from the control tokens.
placeholder string "" Hint text shown while empty.
name string "" Form field name.
maxlength number 0 Native maxlength. 0 is none.
invalid boolean false aria-invalid and the danger border and ring.
disabled boolean false Native disabled.
readonly boolean false Focusable, not editable.
required boolean false Native required.
class string "" Extra classes on the textarea.
attrs Record<string, string | number | boolean | undefined> {} id, minlength, wrap, spellcheck, aria-*, data-*.
oninput / onchange (e) => void () => {} Edit and committed change.
onfocus / onblur / onkeydown (e) => void () => {} Focus and key events.

Keyboard

Keys Action
Enter Inserts a newline. It does not submit the form.
Tab Moves to the next control.

Data attributes

Attribute Values On
data-size "sm" | "md" | "lg" textarea
data-resize "none" | "vertical" | "both" textarea
data-max-rows the limit, when set textarea
data-invalid present while invalid textarea
data-disabled present while disabled textarea

Accessibility

  • A native <textarea>: editing, spellcheck, autofill and validation are the browser's.
  • invalid sets aria-invalid; inside a Field the field wires label, description and error.
  • Growing never moves the caret or the scroll position of the page under it; past maxRows it scrolls inside.

See also