Forms

Textarea

Several lines of text, in the same field as a TextField: label, hint, validation, and the option to grow with its text.

Usage

Bind the value and give it a label. rows sets how many lines show. The user can drag it taller; with autoGrow it grows with its text instead, from rows up to maxRows, and then scrolls.

Note to the payee

Grows from 2 to 8 lines, then scrolls

Message to support

At least 20 characters, so we can help

0 / 280 characters in the note.

PaymentNote.svelte

<script>
  import { Textarea } from 'sveltier';
  let note = $state('');
</script>

<!-- Grows with its text from 2 to 8 lines, then scrolls. -->
<Textarea
  label="Note to the payee"
  name="note"
  hint="They see it on their statement"
  maxlength={280}
  rows={2}
  autoGrow
  maxRows={8}
  bind:value={note}
/>

Validation

required, minlength, maxlength, rules, error and validateOn work as they do on a TextField, and inside a Form.

Next to other fields

The first line sits where a TextField puts its text, so a one-row Textarea is exactly as tall as a TextField of the same size and density, and the two line up in a row. Lines are spaced for reading.

Accessibility

The label, the hint and the error are linked to the <textarea> as on every field.
Growing uses field-sizing: content where the browser has it, and measures the text where it does not, so no line is ever hidden under the edge.

API

Name	Type	Default	Description
`variant`	`'outlined' \| 'tonal' \| 'elevated' \| 'text' \| 'plain'`	`'outlined'`	How the box is drawn.
`color`	`Color`	`'primary'`	The accent of the focused field. An invalid field uses `error`.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Height and text size, matching a Button of the same size.
`density`	`'compact' \| 'default' \| 'comfortable'`	`'default'`	Multiplies the height and padding, never the text.
`rounded`	`boolean \| 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`true`	Corner rounding. `true` keeps the theme's radius.
`disabled`	`boolean`	`false`	Mutes the field and disables its control.
`label`	`string`	`–`	The visible label, linked to the control. Without it, name the control with `aria-label`.
`hint`	`string`	`–`	Help under the field. An error replaces it.
`error`	`FieldError`	`–`	An error from outside the field, such as the server's answer: a message, a list of which the first is shown, or `true` for an invalid state described elsewhere.
`prepend`	`Snippet`	`–`	Content at the start of the box, usually an icon.
`append`	`Snippet`	`–`	Content at the end of the box: an icon, a unit or a button.
`value`	`string`	`–`	The text. Bindable.
`rows`	`number`	`3`	Visible lines, and the fewest it shows when it grows.
`autoGrow`	`boolean`	`false`	Grows with its text instead of scrolling, up to `maxRows`.
`maxRows`	`number`	`–`	With `autoGrow`, the most lines it grows to before it scrolls. Unlimited when not set.
`rules`	`readonly Rule<string>[]`	`–`	Checks run in order after the HTML constraints. The first message is shown.
`validateOn`	`'blur' \| 'input' \| 'submit'`	`–`	When the message shows. Defaults to the form's setting, else `'blur'`.
`required`	`boolean`	`false`	The field must not be empty. Adds an asterisk to the label.
`readonly`	`boolean`	`false`	The text can be read, selected and copied but not changed.
`style`	`string \| null`	`–`	Inline style of the field's root element.
`class`	`ClassValue \| null`	`–`	Classes added after the component's own: a string, an array or an object.
`ref`	`HTMLTextAreaElement \| null`	`–`	The root element, bindable with `bind:ref`.