root
70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import { classNames } from '@/lib/components/classNames';
|
|
import type { ReactNode } from 'react';
|
|
import styles from './FormField.module.css';
|
|
|
|
interface FormFieldProps {
|
|
id: string;
|
|
label: string;
|
|
required?: boolean;
|
|
optionalLabel?: string | undefined;
|
|
supportingText?: string | undefined;
|
|
error?: string | undefined;
|
|
children: ReactNode;
|
|
className?: string | undefined;
|
|
}
|
|
|
|
export function FormField({
|
|
id,
|
|
label,
|
|
required = false,
|
|
optionalLabel,
|
|
supportingText,
|
|
error,
|
|
children,
|
|
className,
|
|
}: FormFieldProps) {
|
|
return (
|
|
<div className={classNames(styles.field, error && styles.invalid, className)}>
|
|
<label className={styles.label} htmlFor={id}>
|
|
<span>{label}</span>
|
|
{required ? (
|
|
<span aria-hidden="true" className={styles.required}>
|
|
*
|
|
</span>
|
|
) : null}
|
|
{!required && optionalLabel ? (
|
|
<span className={styles.optional}>{optionalLabel}</span>
|
|
) : null}
|
|
</label>
|
|
{children}
|
|
{supportingText ? (
|
|
<p id={`${id}-help`} className={styles.help}>
|
|
{supportingText}
|
|
</p>
|
|
) : null}
|
|
{error ? (
|
|
<p id={`${id}-error`} className={styles.error}>
|
|
<span aria-hidden="true">!</span> {error}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function Fieldset({
|
|
legend,
|
|
children,
|
|
className,
|
|
}: {
|
|
legend: string;
|
|
children: ReactNode;
|
|
className?: string | undefined;
|
|
}) {
|
|
return (
|
|
<fieldset className={classNames(styles.fieldset, className)}>
|
|
<legend className={styles.legend}>{legend}</legend>
|
|
{children}
|
|
</fieldset>
|
|
);
|
|
}
|