43 lines
938 B
TypeScript
43 lines
938 B
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
interface FormGroupProps {
|
|
label: string;
|
|
htmlFor?: string;
|
|
error?: string;
|
|
helpText?: string;
|
|
required?: boolean;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default function FormGroup({
|
|
label,
|
|
htmlFor,
|
|
error,
|
|
helpText,
|
|
required,
|
|
children,
|
|
}: FormGroupProps) {
|
|
return (
|
|
<div className="flex flex-col gap-1.5 w-full">
|
|
{htmlFor && (
|
|
<label
|
|
htmlFor={htmlFor}
|
|
className="text-sm font-medium text-slate-700 dark:text-slate-300"
|
|
>
|
|
{label}
|
|
{required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
)}
|
|
|
|
<div className="relative">
|
|
{children}
|
|
</div>
|
|
|
|
{error ? (
|
|
<p className="text-xs text-red-500 font-medium">{error}</p>
|
|
) : helpText ? (
|
|
<p className="text-xs text-slate-500 dark:text-slate-400">{helpText}</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
} |