Textarea

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download textarea -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Textarea } from "@/components/ui/textarea";
import * as UI from "@/components/ui/textarea";

const Component = UI.Textarea;

const args = {
  "placeholder": "Type your message here.",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Textarea v-bind="args" />
</template>

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { Textarea } from "@/components/ui/textarea";
import * as UI from "@/components/ui/textarea";

const Component = UI.Textarea;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const value = ref("");
</script>

<template>
  <Textarea
    v-bind="args"
    v-model="value"
    placeholder="Type your message here."
  />
</template>

Disabled

<script setup lang="ts">
import { Textarea } from "@/components/ui/textarea";
import * as UI from "@/components/ui/textarea";

const Component = UI.Textarea;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Textarea placeholder="Type your message here." disabled />
</template>

With Label

<script setup lang="ts">
import { ref } from "vue";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import * as UI from "@/components/ui/textarea";

const Component = UI.Textarea;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const value = ref("");
</script>

<template>
  <div class="grid w-full max-w-sm gap-1.5">
    <Label for="message">Your message</Label
    ><Textarea
      v-model="value"
      placeholder="Type your message here."
      id="message"
    />
  </div>
</template>

With Text

<script setup lang="ts">
import { ref } from "vue";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import * as UI from "@/components/ui/textarea";

const Component = UI.Textarea;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const value = ref("");
</script>

<template>
  <div class="grid w-full max-w-sm gap-1.5">
    <Label for="message-2">Your Message</Label
    ><Textarea
      v-model="value"
      placeholder="Type your message here."
      id="message-2"
    />
    <p class="text-sm text-neutral-mid">
      Your message will be copied to the support team.
    </p>
  </div>
</template>

With Button

<script setup lang="ts">
import { ref } from "vue";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import * as UI from "@/components/ui/textarea";

const Component = UI.Textarea;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const value = ref("");
</script>

<template>
  <div class="grid w-full max-w-sm gap-2">
    <Textarea v-model="value" placeholder="Type your message here." /><Button
      >Send message</Button
    >
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.