Textarea

TSX
import { Textarea } from "@/components/ui/textarea";

export default function TextareaDemo() {
  return <Textarea placeholder="Enter your message here..." />;
}

TSX
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaRequired() {
  return (
    <form className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="textarea-required">
        Feedback <span className="text-destructive">*</span>
      </Label>
      <Textarea
        id="textarea-required"
        placeholder="Tell us what went wrong..."
        required
      />
    </form>
  );
}

TSX
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaDisabled() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="textarea-disabled">Release notes</Label>
      <Textarea
        id="textarea-disabled"
        defaultValue="Locked while the release is being published."
        disabled
      />
    </div>
  );
}

TSX
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";

export default function TextareaInvalid() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="textarea-invalid">Bio</Label>
      <Textarea
        id="textarea-invalid"
        defaultValue="x"
        aria-invalid="true"
        aria-describedby="textarea-invalid-error"
      />
      <p id="textarea-invalid-error" className="text-sm text-destructive">
        Your bio must be at least 20 characters.
      </p>
    </div>
  );
}