61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* FormLabel Component
|
|
* Consistent label styling with required indicator and help text tooltip
|
|
*/
|
|
|
|
export interface FormLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
htmlFor?: string;
|
|
required?: boolean;
|
|
helpText?: string;
|
|
optionalText?: string;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export const FormLabel: React.FC<FormLabelProps> = ({
|
|
htmlFor,
|
|
required = false,
|
|
helpText,
|
|
optionalText = '(optional)',
|
|
className,
|
|
children,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<label
|
|
htmlFor={htmlFor}
|
|
className={cn(
|
|
'block text-sm font-semibold text-text-primary mb-2',
|
|
'font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
<span className="inline-flex items-center gap-1">
|
|
{children}
|
|
{required && (
|
|
<span className="text-danger" aria-label="required">
|
|
*
|
|
</span>
|
|
)}
|
|
{!required && optionalText && (
|
|
<span className="text-xs text-text-secondary font-normal">
|
|
{optionalText}
|
|
</span>
|
|
)}
|
|
</span>
|
|
{helpText && (
|
|
<span className="ml-2 text-xs text-text-secondary font-normal">
|
|
{helpText}
|
|
</span>
|
|
)}
|
|
</label>
|
|
);
|
|
};
|
|
|
|
FormLabel.displayName = 'FormLabel';
|
|
|
|
export default FormLabel; |