56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
import { LucideIcon } from 'lucide-react';
|
|
|
|
export interface FormFieldProps {
|
|
label?: string;
|
|
error?: string;
|
|
hint?: string;
|
|
required?: boolean;
|
|
icon?: LucideIcon;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const FormField = ({
|
|
label,
|
|
error,
|
|
hint,
|
|
required,
|
|
icon,
|
|
children
|
|
}: FormFieldProps) => {
|
|
return (
|
|
<Box marginBottom={4}>
|
|
{label && (
|
|
<Box display="flex" alignItems="center" gap={2} marginBottom={1.5}>
|
|
{icon && <Icon icon={icon} size={4} intent="low" />}
|
|
<Text size="sm" weight="medium" variant="high">
|
|
{label}
|
|
</Text>
|
|
{required && <Text variant="critical">*</Text>}
|
|
</Box>
|
|
)}
|
|
|
|
{children}
|
|
|
|
{error && (
|
|
<Box marginTop={1}>
|
|
<Text size="xs" variant="critical" block>
|
|
{error}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{hint && !error && (
|
|
<Box marginTop={1}>
|
|
<Text size="xs" variant="low" block>
|
|
{hint}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|