Input
An input field is a field in which the user can enter text or data. You can add icon for disclaimer and error message to the input field.
Preview
"use client";
import { Input } from "@/components/Input";
import { Label } from "@/components/Label";
import {
Tooltip,
TooltipArrow,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/Tooltip";
import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
import React from "react";
const Page = () => {
return (
<div>
<Label htmlFor="email">Email</Label>
<Input
placeholder="Email"
className="w-80"
icon={
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<QuestionMarkCircleIcon className="h-4 w-4" />
</TooltipTrigger>
<TooltipContent
side="right"
sideOffset={5}
className="bg-violet-300"
>
<p>Add to library</p>
<TooltipArrow className="fill-violet-300" />
</TooltipContent>
</Tooltip>
</TooltipProvider>
}
/>
</div>
);
};
export default Page;
Examples
Input with tooltip icon
Input without tooltip icon and smaller width
Input with error message
There is an error
Copy and paste the following code into your project.
import React from "react";
import { cn } from "@/lib/utils";
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
icon?: React.ReactElement;
error?: string;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, icon, error, ...props }, ref) => {
return (
<div className="flex gap-2 items-center">
<input
type={type}
className={cn(
"flex h-10 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-violet-200 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
ref={ref}
{...props}
/>
{icon && (
<div
className={cn(
`flex items-center -ml-8 ${
error ? "text-red-500" : "text-gray-500"
}`
)}
>
{icon}
</div>
)}
</div>
);
}
);
Input.displayName = "Input";
export { Input };