Components
Textarea

Textarea

Displays a form textarea or a component that looks like a textarea.

How it works

Install the following dependencies:

pnpm add motion

Create a new file at lib/utils.ts and add the provided code.

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
    return twMerge(clsx(inputs));
}

Create a file at components/ui/label.tsx and paste the given code.

label.tsx

import * as React from "react";
import { cn } from "@/lib/utils";
import { HTMLMotionProps, motion } from "motion/react";
 
const _Textarea = React.forwardRef<
    HTMLTextAreaElement,
    HTMLMotionProps<"textarea">
>(({ className, ...props }, ref) => {
    return (
        <motion.textarea
            className={cn(
                "flex min-h-[80px] w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground shadow-sm shadow-black/5 transition-shadow placeholder:text-muted-foreground/70 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50",
                className,
            )}
            ref={ref}
            {...props}
        />
    );
});
 
_Textarea.displayName = "Textarea";
 
const Textarea = motion.create(_Textarea);
 
export { Textarea };

Import and use the Accordion component in your application.

import React from "react";
 
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
 
const TextareaDemo = () => {
    return (
        <div className="w-full max-w-sm space-y-2">
            <Label htmlFor="textarea">Simple textarea</Label>
            <Textarea id="textarea" placeholder="Leave a comment" rows={4} />
        </div>
    );
};
 
export default TextareaDemo;

Examples

Default

W/ helper text

Please add as many details as you can

W/ character count

180 characters left

W/ label animation

Auto-growing textarea