Textarea

STextarea is a multi-line text field. It is built on SFormField (the same composition as SInput): the label, hint/error message and a11y wiring are reused. It works with v-model.

The label floats by default (at rest it sits on the first line, on focus or once filled it moves up onto the top border); turn it off with :floating-label="false".

Basic usage

Comment

<template>
  <STextarea
    v-model="comment"
    label="Comment"
    :rows="4"
  />
</template>

Hint and error

Bio

A few words about yourself

Bio

Fill in the field

<template>
  <STextarea
    label="Bio"
    hint="A few words about yourself"
  />
  <STextarea
    label="Bio"
    error="Fill in the field"
  />
</template>

States

required marks the field as required (* next to the label), invalid marks the field as invalid, disabled dims the field and blocks input.

Required *

Invalid

Disabled

<template>
  <STextarea
    label="Required"
    required
    :rows="3"
  />
  <STextarea
    label="Invalid"
    invalid
    :rows="3"
  />
  <STextarea
    label="Disabled"
    disabled
    placeholder="Unavailable"
    :rows="3"
  />
</template>

prepend / append slots

The slots put arbitrary content inside the field border — an icon or a button.

Note

Message

<template>
  <STextarea
    v-model="note"
    label="Note"
    :rows="3"
  >
    <template #prepend>
      <SIcon
        icon="pencil"
        :size="16"
      />
    </template>
  </STextarea>

  <STextarea
    v-model="message"
    label="Message"
    :rows="3"
  >
    <template #append>
      <SButton
        size="sm"
        variant="ghost"
        icon="mail"
        aria-label="Send"
      />
    </template>
  </STextarea>
</template>

Read-only

readonly shows the text and lets the user select and copy it but not change it: unlike disabled, the field is not dimmed and stays in the tab order.

Terms

Shipments are accepted in the sender's packaging.

<template>
  <STextarea
    v-model="terms"
    label="Terms"
    readonly
    :rows="3"
  />
</template>

API

Props

Name	Type	Default	Description
size	"md" | "sm" | "lg"	"md"	Field size: affects the font and inner padding (height comes from rows/resizing).
id	string	undefined	Field id. Generated automatically when not set (SSR-safe).
label	string	undefined	Field label.
floating-label	boolean	true	Floating label: the label sits inside the border (at rest, at the first line, like a placeholder) and floats up to the top edge on focus or when filled. On by default; false renders a regular label above the field. The label size is fixed and does not depend on size.
hint	string	undefined	Hint below the field.
error	string	undefined	Error message. When set, the field is marked invalid.
invalid	boolean	false	Explicitly marks the field invalid (in addition to error).
readonly	boolean	undefined	Read-only field: the text is visible and selectable but cannot be edited.
square	boolean	undefined	Square corners: removes the field border radius (rounded by default).
required	boolean	false	Required field: adds a * marker to the label.
placeholder	string	undefined	Placeholder text in an empty field.
disabled	boolean	false	Disables input and makes the field inactive.
rows	number	3	Number of visible rows (the default height).
model-value	string	undefined	Field value. Two-way bound via v-model.

Events

Name	Signature	Description
update:modelValue	(value: string | undefined) => void	Emitted when modelValue changes. Used for two-way binding (v-model).

Slots

Name	Description
prepend	Content at the start of the field, inside the border (icon, button).
append	Content at the end of the field, inside the border (icon, button).