Textarea

Multiline text input with FormField chrome and optional autosize.

Introduction

Use Textarea for multiline text entry. Bridge UI provides a dedicated Textarea component instead of combining multiline behavior into TextField.

Choose Textarea when users need to enter paragraphs, comments, or other long-form content. It supports rows, optional autosize, and textarea-specific resize behavior. Use TextField for single-line inputs such as names, emails, or search queries.

Import

import { Textarea } from "@bridge-ui/vue/Components/Textarea";

import { Textarea } from "@bridge-ui/react/Components/Textarea";

Basic usage

Set rows to control the initial height. Bind the value with value/onChange in React or v-model in Vue. For uncontrolled usage with an initial value, use defaultValue in React or default-value in Vue.

<script setup lang="ts">
import { ref } from "vue";

import { Textarea } from "@bridge-ui/vue/Components/Textarea";

const bio = ref("");
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <Textarea :rows="3" label="Notes" placeholder="Add details..." />

    <Textarea
      :rows="4"
      label="Bio"
      v-model="bio"
      description="Tell us about yourself."
    />
  </div>
</template>

import { useState } from "react";

import { Textarea } from "@bridge-ui/react/Components/Textarea";

export default function TextareaBasic() {
  const [bio, setBio] = useState("");

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Textarea rows={3} label="Notes" placeholder="Add details..." />

      <Textarea
        rows={4}
        label="Bio"
        value={bio}
        description="Tell us about yourself."
        onChange={(event) => setBio(event.target.value)}
      />
    </div>
  );
}

Sizes

Control the textarea size with the size prop. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

<script setup lang="ts">
import { Textarea } from "@bridge-ui/vue/Components/Textarea";
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <Textarea :rows="2" size="2xs" label="2xs" placeholder="2xs" />
    <Textarea :rows="2" size="xs" label="xs" placeholder="xs" />
    <Textarea :rows="2" size="sm" label="sm" placeholder="sm" />
    <Textarea :rows="2" size="md" label="md" placeholder="md" />
    <Textarea :rows="2" size="lg" label="lg" placeholder="lg" />
    <Textarea :rows="2" size="xl" label="xl" placeholder="xl" />
    <Textarea :rows="2" size="2xl" label="2xl" placeholder="2xl" />
  </div>
</template>

import { Textarea } from "@bridge-ui/react/Components/Textarea";

export default function TextareaSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Textarea rows={2} size="2xs" label="2xs" placeholder="2xs" />
      <Textarea rows={2} size="xs" label="xs" placeholder="xs" />
      <Textarea rows={2} size="sm" label="sm" placeholder="sm" />
      <Textarea rows={2} size="md" label="md" placeholder="md" />
      <Textarea rows={2} size="lg" label="lg" placeholder="lg" />
      <Textarea rows={2} size="xl" label="xl" placeholder="xl" />
      <Textarea rows={2} size="2xl" label="2xl" placeholder="2xl" />
    </div>
  );
}

Rounded

Use the rounded prop to control border radius. Available values: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, and full (defaults vary by component).

<script setup lang="ts">
import { Textarea } from "@bridge-ui/vue/Components/Textarea";
</script>

<template>
  <div class="grid w-full max-w-2xl grid-cols-2 gap-4 sm:grid-cols-3">
    <Textarea :rows="2" label="none" rounded="none" />
    <Textarea :rows="2" label="sm" rounded="sm" />
    <Textarea :rows="2" label="md" rounded="md" />
    <Textarea :rows="2" label="2xl" rounded="2xl" />
    <Textarea :rows="2" label="full" rounded="full" />
  </div>
</template>

import { Textarea } from "@bridge-ui/react/Components/Textarea";

export default function TextareaRounded() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-2 gap-4 sm:grid-cols-3">
      <Textarea rows={2} label="none" rounded="none" />
      <Textarea rows={2} label="sm" rounded="sm" />
      <Textarea rows={2} label="md" rounded="md" />
      <Textarea rows={2} label="2xl" rounded="2xl" />
      <Textarea rows={2} label="full" rounded="full" />
    </div>
  );
}

Autosize

Enable autosize to grow the textarea as the user types. The native resize handle is disabled when autosize is on.

<script setup lang="ts">
import { Textarea } from "@bridge-ui/vue/Components/Textarea";
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <Textarea
      autosize
      :rows="2"
      label="Growing textarea"
      placeholder="Add more lines to see autosize..."
    />
  </div>
</template>

import { Textarea } from "@bridge-ui/react/Components/Textarea";

export default function TextareaAutosize() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Textarea
        autosize
        rows={2}
        label="Growing textarea"
        placeholder="Add more lines to see autosize..."
      />
    </div>
  );
}

Validation

Set error and errorMessage to show invalid styling and an error message below the field.

<script setup lang="ts">
import { Textarea } from "@bridge-ui/vue/Components/Textarea";
</script>

<template>
  <div class="flex w-full max-w-sm flex-col gap-4">
    <Textarea
      error
      :rows="3"
      label="Message"
      placeholder="Write your message..."
      error-message="Please enter at least 10 characters."
    />
  </div>
</template>

import { Textarea } from "@bridge-ui/react/Components/Textarea";

export default function TextareaValidation() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Textarea
        error
        rows={3}
        label="Message"
        placeholder="Write your message..."
        errorMessage="Please enter at least 10 characters."
      />
    </div>
  );
}

Accessibility

Textarea follows the same FormField accessibility pattern as TextField:

The label is associated with the textarea via htmlFor / id, using controlId.
description and errorMessage are linked through aria-describedby.
When error is true, the textarea receives aria-invalid="true".

Anatomy

Textarea composes FormField around a native <textarea>:

FormField (root)
├── Header — label, optional corner text, required indicator
├── Container — variant shell
│   └── Textarea — native multiline input
└── Footer — description or error message

When autosize is enabled, the textarea height grows with content and the native resize handle is disabled.

API

Prop	Type	Default	Description
v-model	string	—	Two-way binding for the textarea value.
default-value	string	—	Initial value for uncontrolled usage (without v-model).

Prop	Type	Default	Description
value	string	—	Textarea value. Use with onChange for controlled state.
defaultValue	string	—	Initial value for uncontrolled usage.
onChange	ChangeEventHandler<HTMLTextAreaElement>	—	Native textarea change handler.

Native textarea attributes (rows, placeholder, maxLength, etc.) are merged onto the textarea element.

Textarea-specific

Prop	Type	Default	Description
autosize	boolean	—	Whether the textarea resizes with its content. Defaults to true when likeInput is set.
likeInput	boolean	false	Compact TextField-like sizing. Enables autosize and rows={1} by default.
resize	TextareaResize	"none"	Native resize handle. Ignored when autosize is true.

Inherited from FormField

Prop	Type	Default	Description
label	string	—	Primary label text above the control.
description	string	—	Helper text below the control (hidden when invalid).
corner	string	—	Secondary label text at the inline end of the header row.
required	boolean	false	Shows a red asterisk on the label.
disabled	boolean	false	Whether the control is disabled.
readonly	boolean	false	Whether the control is read-only.
error	boolean	false	Applies invalid styling and hides description.
errorMessage	string	—	Error message below the control.
showErrorIcon	boolean	true	Shows an error icon when invalid.
hideErrorMessage	boolean	false	Does not reserve space for error messages.
variant	FormFieldVariant	"outline"	Visual variant of the field shell.
color	FormFieldColor	"primary"	Color applied to the field control.
size	FormFieldSize	"md"	Typography and control sizing.
rounded	FormFieldRounded	"md"	Border radius of the field control.
start	string	—	Inline-start text inside the field (prefix).
end	string	—	Inline-end text inside the field (suffix).
startIcon	IconSource	—	Icon at the inline start.
endIcon	IconSource	—	Icon at the inline end.
errorIcon	IconSource	"alert"	Icon shown when invalid and showErrorIcon is enabled.
controlId	string	—	Associates labels and helper text with the control. Auto-generated when omitted.
classes	FormFieldClasses	—	Class overrides per part.
customProps	FormFieldCustomProps	—	Props for each part. label accepts Label props (without children); error label colors come from Label.
slots	FormFieldSlots	—	React slots. Vue: #label, #corner, default, #description, #errorMessage, #start, #end.

TextField