Components
Input

Input

Displays a form input field or a component that looks like an input field.

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/input.tsx and paste the given code.

input.tsx

"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { HTMLMotionProps, motion } from "motion/react";
 
const _Input = React.forwardRef<HTMLInputElement, HTMLMotionProps<"input">>(
    ({ className, type, ...props }, ref) => {
        return (
            <motion.input
                type={type}
                className={cn(
                    "flex h-9 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",
                    type === "search" &&
                        "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
                    type === "file" &&
                        "p-0 pr-3 italic text-muted-foreground/70 file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:not-italic file:text-foreground",
                    className,
                )}
                ref={ref}
                {...props}
            />
        );
    },
);
 
_Input.displayName = "Input";
 
const Input = motion.create(_Input);
 
export { Input };

Import and use the Accordion component in your application.

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
 
import React from "react";
 
const InputDemo = () => {
    return (
        <div className="w-full max-w-xs space-y-2">
            <Label htmlFor="email">Email</Label>
            <Input id="email" placeholder="Email" type="email" />
        </div>
    );
};
 
export default InputDemo;

Examples

Default

W/ icon

W/ helper

We won‘t share your email with anyone

W/ add-on

.com

W/ label animation