Input

This is a simple input component.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Input Code

Copy Input Code

Input Props

Name	Type	Required	Default	Description
placeholder	string	No	"Enter text here..."	Placeholder text for the input field.
error	boolean	No	false	Indicates if the input is in an error state.
variant	"sm" \| "md" \| "lg"	No	"md"	Variant of the input field.
type	"text" \| "password" \| "email" \| "number"	No	"text"	Type of the input field.
className	string	No	undefined	Additional classnames for custom styling of the container.