Data Display
Forms
Navigation
Textarea
A native textarea element.
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" />;
}
Installation
pnpm dlx cnippet@latest add textarea
Usage
import { Textarea } from "@/components/ui/textarea"<Textarea />Examples
Sizes
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
return <Textarea placeholder="Type your message here" size="lg" />;
}
With Label
import { useId } from "react";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
const id = useId();
return (
<div className="flex flex-col items-start gap-2">
<Label htmlFor={id}>Message</Label>
<Textarea id={id} placeholder="Type your message here" />
</div>
);
}
Form Integration
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Textarea } from "@/components/ui/textarea";
export default function Particle() {
const [loading, setLoading] = React.useState(false);
const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
alert(`Message: ${formData.get("message") || ""}`);
};
return (
<Form className="max-w-64" onSubmit={onSubmit}>
<Field>
<FieldLabel>Message</FieldLabel>
<Textarea
disabled={loading}
name="message"
placeholder="Type your message here"
required
/>
<FieldError>This field is required.</FieldError>
</Field>
<Button disabled={loading} type="submit">
Submit
</Button>
</Form>
);
}