diff --git a/libs/ui-toolkit/src/components/form-group/form-group.tsx b/libs/ui-toolkit/src/components/form-group/form-group.tsx
index 40bbb04f9..06ff27313 100644
--- a/libs/ui-toolkit/src/components/form-group/form-group.tsx
+++ b/libs/ui-toolkit/src/components/form-group/form-group.tsx
@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 
 export interface FormGroupProps {
   children: ReactNode;
+  className?: string;
   label: string; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then add labelClassName="sr-only"
   labelFor: string; // Same as above
   hideLabel?: boolean;
@@ -11,17 +12,19 @@ export interface FormGroupProps {
 
 export const FormGroup = ({
   children,
+  className,
   label,
   labelFor,
   labelAlign = 'left',
   hideLabel = false,
 }: FormGroupProps) => {
+  const wrapperClasses = classNames('relative mb-6', className);
   const labelClasses = classNames('block mb-2 text-sm', {
     'text-right': labelAlign === 'right',
     'sr-only': hideLabel,
   });
   return (
-    <div data-testid="form-group" className="relative mb-6">
+    <div data-testid="form-group" className={wrapperClasses}>
       {label && (
         <label htmlFor={labelFor} className={labelClasses}>
           {label}