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';

app/soapbox/features/auth_login/components/registration_form.tsx

@@ -10,9 +10,8 @@ import { accountLookup } from 'soapbox/actions/accounts';
 import { register, verifyCredentials } from 'soapbox/actions/auth';
 import { openModal } from 'soapbox/actions/modals';
 import BirthdayInput from 'soapbox/components/birthday_input';
-import { Form, FormGroup, FormActions, Button, Input, Textarea, Text } from 'soapbox/components/ui';
+import { Checkbox, Form, FormGroup, FormActions, Button, Input, Textarea, Text } from 'soapbox/components/ui';
 import CaptchaField from 'soapbox/features/auth_login/components/captcha';
-import { Checkbox } from 'soapbox/features/forms';
 import { useAppSelector, useAppDispatch, useSettings, useFeatures } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -328,24 +327,26 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
           value={params.get('captcha_solution', '')}
         />
 
-        <div className='simple_form space-y-3'>
+        <FormGroup
+          labelText={intl.formatMessage(messages.agreement, { tos: <Link to='/about/tos' target='_blank' key={0}>{intl.formatMessage(messages.tos)}</Link> })}
+        >
           <Checkbox
-            label={intl.formatMessage(messages.agreement, { tos: <Link to='/about/tos' target='_blank' key={0}>{intl.formatMessage(messages.tos)}</Link> })}
             name='agreement'
             onChange={onCheckboxChange}
             checked={params.get('agreement', false)}
             required
           />
+        </FormGroup>
 
         {supportsEmailList && (
+          <FormGroup labelText={intl.formatMessage(messages.newsletter)}>
             <Checkbox
-              label={intl.formatMessage(messages.newsletter)}
               name='accepts_email_list'
               onChange={onCheckboxChange}
               checked={params.get('accepts_email_list', false)}
             />
+          </FormGroup>
         )}
-        </div>
 
         <FormActions>
           <Button type='submit'>