Components
Loading preview...
A native textarea element with custom size options.
npx shadcn@latest add https://21st.dev/r/coss.com/textarea"use client";
import { useState } from "react";
import type { FormEvent } from "react";
import { Textarea } from "@/components/ui/component";
export default function TextareaForm() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: 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 (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<form className="flex flex-col gap-4 w-full max-w-64" onSubmit={onSubmit}>
<div className="flex flex-col gap-2">
<label className="text-sm font-medium text-foreground">Message</label>
<Textarea
name="message"
placeholder="Type your message here"
required
/>
</div>
<button
type="submit"
disabled={loading}
className="inline-flex items-center justify-center rounded-lg border border-primary bg-primary px-4 h-9 text-sm font-medium text-primary-foreground shadow-xs hover:bg-primary/90 disabled:opacity-64 disabled:pointer-events-none"
>
{loading ? "Submitting..." : "Submit"}
</button>
</form>
</div>
);
}