fix(form-field): add required prop

morewings · Jul 27, 2024 · 488ea06 · 488ea06
1 parent ae8fb0d
commit 488ea06
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/src/lib/FormField/FormField.tsx b/src/lib/FormField/FormField.tsx
@@ -10,12 +10,19 @@ import classes from './FormField.module.css';
 export type Props = DataAttributes &
     LibraryProps & {
         children: ReactElement;
+        /** Set text label */
         label: string;
+        /** Set hint text to be displayed below input */
         hint?: string;
+        /**
+         * Renders * character after label indicating required input status.
+         * Also set automatically when required input provided.
+         */
+        required?: boolean;
     };
 
 export const FormField = forwardRef<HTMLDivElement, Props>(
-    ({className, children, label, hint, ...nativeProps}, ref) => {
+    ({className, children, label, hint, required, ...nativeProps}, ref) => {
         const inputProps = Children.only(children).props;
         const id = useInternalId(inputProps.id);
         const childrenWithProps = inputProps.id
@@ -24,7 +31,9 @@ export const FormField = forwardRef<HTMLDivElement, Props>(
         return (
             <div {...nativeProps} ref={ref} className={classNames(classes.wrapper, className)}>
                 <label
-                    className={classNames(classes.label, {[classes.required]: inputProps.required})}
+                    className={classNames(classes.label, {
+                        [classes.required]: inputProps.required || required,
+                    })}
                     htmlFor={id}>
                     {label}
                 </label>