Extend 'FormGroup' to support Checkbox

app/soapbox/components/ui/checkbox/checkbox.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface ICheckbox extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'disabled' | 'id' | 'name' | 'onChange' | 'checked' | 'required'> { }
+
+const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
+  return (
+    <input
+      {...props}
+      ref={ref}
+      type='checkbox'
+      className='focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded'
+    />
+  );
+});
+
+export default Checkbox;

app/soapbox/components/ui/form-group/form-group.tsx

@@ -1,6 +1,10 @@
 import React, { useMemo } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
+import Checkbox from '../checkbox/checkbox';
+import HStack from '../hstack/hstack';
+import Stack from '../stack/stack';
+
 interface IFormGroup {
   /** Input label message. */
   labelText?: React.ReactNode,
@@ -23,6 +27,44 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
       { id: formFieldId },
     );
   }
+  const isCheckboxFormGroup = firstChild?.type === Checkbox;
+
+  if (isCheckboxFormGroup) {
+    return (
+      <HStack alignItems='start' space={2}>
+        {firstChild}
+
+        <Stack>
+          {labelText && (
+            <label
+              htmlFor={formFieldId}
+              data-testid='form-group-label'
+              className='-mt-0.5 block text-sm font-medium text-gray-700 dark:text-gray-400'
+            >
+              {labelText}
+            </label>
+          )}
+
+          {errors?.length > 0 && (
+            <div>
+              <p
+                data-testid='form-group-error'
+                className='mt-0.5 text-xs text-danger-900 bg-danger-200 rounded-md inline-block px-2 py-1 relative form-error'
+              >
+                {errors.join(', ')}
+              </p>
+            </div>
+          )}
+
+          {hintText && (
+            <p data-testid='form-group-hint' className='mt-0.5 text-xs text-gray-400'>
+              {hintText}
+            </p>
+          )}
+        </Stack>
+      </HStack>
+    );
+  }
 
   return (
     <div>

app/soapbox/components/ui/index.ts

@@ -1,6 +1,7 @@
 export { default as Avatar } from './avatar/avatar';
 export { default as Button } from './button/button';
 export { Card, CardBody, CardHeader, CardTitle } from './card/card';
+export { default as Checkbox } from './checkbox/checkbox';
 export { default as Column } from './column/column';
 export { default as Counter } from './counter/counter';
 export { default as Emoji } from './emoji/emoji';