Textarea

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-vue/textarea
Copy

Usage#

Copy<script setup lang="ts">
import { Textarea } from "@/components/ui/textarea"
</script>
 
<template>
  <Textarea placeholder="Type your message here." />
</template>

Examples#

Field#

Use Field, FieldLabel, and FieldDescription to create a textarea with a label and description.

Disabled#

Use the disabled prop to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

Invalid#

Use the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

Button#

Pair with Button to create a textarea with a submit button.

Variants#

Use the variant prop to change the visual style of the textarea.

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

Textarea#

The Textarea component displays a multi-line text input field.