Textarea ​

A multi-line input for entering longer text. Supports clear editing and flexible sizing for different content needs.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Textarea } from 'frappe-ui'

const value = ref('')
</script>

<template>
  <Textarea v-model="value" placeholder="Write something..." />
</template>

Variants ​

Sizes ​

Labeling ​

label, description, error, and required are wired into the underlying textarea via the shared labeling contract. Setting error suppresses the description and applies aria-invalid="true".

Tell us a bit about yourself.

States ​

API Reference ​

Show types
typescript
import type { InputSize, InputVariant } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

export interface TextareaProps extends InputLabelingProps {
  /** Controls the visual size of the textarea. */
  size?: InputSize

  /** Visual style variant. */
  variant?: InputVariant

  /** Placeholder text shown when empty. */
  placeholder?: string

  /** Disables user interaction. */
  disabled?: boolean

  /** Bound value of the textarea. */
  modelValue?: string

  /** Debounce delay (ms) before emitting value updates. */
  debounce?: number

  /** Number of visible text rows. */
  rows?: number
}

export interface TextareaEmits {
  /** Fired when the textarea value changes. */
  'update:modelValue': [value: string]
}
Prop Default Type
size
"sm"
InputSize

Controls the visual size of the textarea.

variant
"subtle"
InputVariant

Visual style variant.

placeholder
—
string

Placeholder text shown when empty.

disabled
—
boolean

Disables user interaction.

modelValue
—
string

Bound value of the textarea.

debounce
—
number

Debounce delay (ms) before emitting value updates.

rows
3
number

Number of visible text rows.

label
—
string

Label rendered above (or beside, for binary controls) the input.

description
—
string

Helper text rendered below the input. Hidden when `error` is set.

error
—
string | FrappeUIError

Error message rendered below the input. When set, the control receives `aria-invalid="true"` and `data-state="invalid"`. May be either a string or an `Error` object whose `messages?: string[]` is rendered as stacked lines (with `Error.message` as the fallback).

required
—
boolean

Marks the field as required. Renders an asterisk next to the label and forwards `required` / `aria-required` to the underlying control.

id
—
string

HTML id of the underlying control. Auto-generated via `useId()` if omitted.

Slot Payload
label
{ required: boolean; }

Overrides the rendered label content. Receives `{ required }`.

description
—

Overrides the rendered description content.

Event Payload
update:modelValue
[value: string]

Fired when the model value changes.

TextInputTimePicker