53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
export interface SelectOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
export interface SelectFieldProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
label: string;
|
|
options: SelectOption[];
|
|
error?: string;
|
|
required?: boolean;
|
|
helpText?: string;
|
|
}
|
|
|
|
export const SelectField: React.FC<SelectFieldProps> = ({
|
|
label,
|
|
options,
|
|
error,
|
|
required,
|
|
helpText,
|
|
className = '',
|
|
...props
|
|
}) => {
|
|
return (
|
|
<div className="space-y-1">
|
|
<label className="block text-sm font-medium text-gray-700">
|
|
{label}
|
|
{required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
<select
|
|
className={`w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-[#667eea] focus:border-transparent transition-all ${
|
|
error ? 'border-red-300 bg-red-50' : 'border-gray-300'
|
|
} ${className}`}
|
|
{...props}
|
|
>
|
|
<option value="">Select {label}</option>
|
|
{options.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{helpText && !error && (
|
|
<p className="text-xs text-gray-500">{helpText}</p>
|
|
)}
|
|
{error && (
|
|
<p className="text-xs text-red-600">{error}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|