54 lines
1.2 KiB
TypeScript
54 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface AuthFormFieldProps {
|
|
label: string;
|
|
error?: string;
|
|
required?: boolean;
|
|
helpText?: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
htmlFor?: string;
|
|
}
|
|
|
|
export function AuthFormField({
|
|
label,
|
|
error,
|
|
required = false,
|
|
helpText,
|
|
children,
|
|
className,
|
|
htmlFor,
|
|
}: AuthFormFieldProps) {
|
|
const fieldId =
|
|
htmlFor || `auth-field-${Math.random().toString(36).substr(2, 9)}`;
|
|
|
|
return (
|
|
<div className={cn('w-full space-y-2', className)}>
|
|
<label
|
|
htmlFor={fieldId}
|
|
className="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
>
|
|
{label}
|
|
{required && (
|
|
<span className="text-red-500 ml-1" aria-label="required">
|
|
*
|
|
</span>
|
|
)}
|
|
</label>
|
|
<div id={fieldId}>{children}</div>
|
|
{helpText && !error && (
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">{helpText}</p>
|
|
)}
|
|
{error && (
|
|
<p
|
|
className="text-sm text-red-600 dark:text-red-400"
|
|
role="alert"
|
|
id={`${fieldId}-error`}
|
|
>
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|