Textarea

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Textarea } from "@line/abc-def-react/textarea";

<script setup lang="ts">
import { Textarea } from "@line/abc-def-vue/textarea";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Textarea } from "@line/abc-def-react/textarea";

export function Example() {
  return <Textarea placeholder="Notes for this token" />;
}

<script setup lang="ts">
import { Field, FieldLabel } from "@line/abc-def-vue/field";
import { Textarea } from "@line/abc-def-vue/textarea";
</script>

<template>
  <Field>
    <FieldLabel html-for="token-notes">Notes</FieldLabel>
    <Textarea id="token-notes" placeholder="Notes for this token" />
  </Field>
</template>

Component tokens

Composition exports

Usage notes

• Use for long-form input.
• Pair with description text when formatting expectations matter.
• Related component tokens use the `textarea` token group in `@line/abc-def-styles/css`.