Textarea

Installation

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

pnpm exec frontfriend download textarea -f react --primitive base

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

Usage

import { Textarea } from "@/components/ui/textarea";
<Textarea
  disabled={false}
  placeholder="Type your message here."
/>;

Examples

Default

import { Textarea } from "@/components/ui/textarea";
<Textarea
  
  placeholder="Type your message here."
/>;

Disabled

import { Textarea } from "@/components/ui/textarea";
<Textarea placeholder="Type your message here." disabled />;

With Label

import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
<div className="grid w-full max-w-sm gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>;

With Text

import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
<div className="grid w-full max-w-sm gap-1.5">
  <Label htmlFor="message-2">Your Message</Label>
  <Textarea placeholder="Type your message here." id="message-2" />
  <p className="text-sm text-neutral-mid">
    Your message will be copied to the support team.
  </p>
</div>;

With Button

import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
<div className="grid w-full max-w-sm gap-2">
  <Textarea placeholder="Type your message here." />
  <Button>Send message</Button>
</div>;

API reference

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

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