30 lines
1.2 KiB
TypeScript
30 lines
1.2 KiB
TypeScript
import { InputHTMLAttributes, forwardRef } from 'react';
|
|
import { cn } from '../../lib/utils';
|
|
|
|
export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ className, type, label, error, ...props }, ref) => {
|
|
return (
|
|
<div className="flex flex-col gap-1.5 w-full">
|
|
{label && <label className="text-sm font-medium text-slate-700">{label}</label>}
|
|
<input
|
|
type={type}
|
|
className={cn(
|
|
"flex h-12 w-full rounded-xl border border-slate-200 bg-white px-4 py-2 text-sm transition-all shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan focus-visible:border-cyan disabled:cursor-not-allowed disabled:opacity-50",
|
|
error && "border-red-500 focus-visible:ring-red-500",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
{error && <span className="text-sm text-red-500">{error}</span>}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
Input.displayName = 'Input';
|