diff --git a/packages/design/src/Form/components/GenderId/GenderId.stories.tsx b/packages/design/src/Form/components/GenderId/GenderId.stories.tsx
index 28d2e1a4..c7b92bb9 100644
--- a/packages/design/src/Form/components/GenderId/GenderId.stories.tsx
+++ b/packages/design/src/Form/components/GenderId/GenderId.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { type Meta, type StoryObj } from '@storybook/react';
-import { GenderIdPattern } from './GenderId.js';
+import  GenderIdPattern from './index.js';
 
 const meta: Meta<typeof GenderIdPattern> = {
   title: 'patterns/GenderIdPattern',
@@ -24,67 +24,41 @@ const meta: Meta<typeof GenderIdPattern> = {
 
 export default meta;
 
+const defaultArgs = {
+  genderId: 'gender-identity',
+  label: 'Gender identity',
+  hint: 'For example, man, woman, non-binary',
+  required: true,
+  preferNotToAnswerText: 'Prefer not to share my gender identity',
+};
+
 export const Default: StoryObj<typeof GenderIdPattern> = {
-  args: {
-    genderId: 'gender-identity',
-    label: 'Gender identity',
-    hint: 'For example, man, woman, non-binary',
-    required: true,
-    preferNotToAnswerText: 'Prefer not to share my gender identity',
-  },
+  args: { ...defaultArgs },
 };
 
 export const Optional: StoryObj<typeof GenderIdPattern> = {
-  args: {
-    genderId: 'gender-identity',
-    label: 'Gender identity',
-    hint: 'For example, man, woman, non-binary',
-    required: false,
-    preferNotToAnswerText: 'Prefer not to share my gender identity',
-  },
+  args: { ...defaultArgs, required: false },
 };
 
 export const WithError: StoryObj<typeof GenderIdPattern> = {
   args: {
-    genderId: 'gender-identity',
+    ...defaultArgs,
     label: 'Gender identity with error',
-    hint: 'For example, man, woman, non-binary',
-    required: true,
     error: {
       type: 'custom',
       message: 'This field has an error',
     },
-    preferNotToAnswerText: 'Prefer not to share my gender identity',
   },
 };
 
 export const WithHint: StoryObj<typeof GenderIdPattern> = {
-  args: {
-    genderId: 'gender-identity',
-    label: 'Gender identity',
-    hint: 'For example, man, woman, non-binary',
-    required: true,
-    preferNotToAnswerText: 'Prefer not to share my gender identity',
-  },
+  args: { ...defaultArgs },
 };
 
 export const WithCheckboxChecked: StoryObj<typeof GenderIdPattern> = {
-  args: {
-    genderId: 'gender-identity',
-    label: 'Gender identity',
-    hint: 'For example, man, woman, non-binary',
-    required: true,
-    preferNotToAnswerText: 'Prefer not to share my gender identity',
-    preferNotToAnswerChecked: true,
-  },
+  args: { ...defaultArgs, preferNotToAnswerChecked: true },
 };
 
 export const WithoutCheckbox: StoryObj<typeof GenderIdPattern> = {
-  args: {
-    genderId: 'gender-identity',
-    label: 'Gender identity',
-    hint: 'For example, man, woman, non-binary',
-    required: true,
-    preferNotToAnswerText: undefined,
-  },
+  args: { ...defaultArgs, preferNotToAnswerText: undefined },
 };
diff --git a/packages/design/src/Form/components/GenderId/GenderId.tsx b/packages/design/src/Form/components/GenderId/GenderId.tsx
deleted file mode 100644
index 6755e4da..00000000
--- a/packages/design/src/Form/components/GenderId/GenderId.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import classNames from 'classnames';
-import { useFormContext } from 'react-hook-form';
-import { type GenderIdProps } from '@atj/forms';
-
-import { type PatternComponent } from '../../index.js';
-
-export const GenderIdPattern: PatternComponent<GenderIdProps> = ({
-  genderId,
-  hint,
-  label,
-  required,
-  error,
-  value,
-  preferNotToAnswerText,
-  preferNotToAnswerChecked: initialPreferNotToAnswerChecked = false,
-}) => {
-  const { register, setValue } = useFormContext();
-  const [preferNotToAnswerChecked, setPreferNotToAnswerChecked] = useState(
-    initialPreferNotToAnswerChecked
-  );
-
-  const errorId = `input-error-message-${genderId}`;
-  const hintId = `hint-${genderId}`;
-  const preferNotToAnswerId = `prefer-not-to-answer-${genderId}`;
-
-  useEffect(() => {
-    if (preferNotToAnswerChecked) {
-      setValue(genderId, preferNotToAnswerText, { shouldValidate: true });
-    } else {
-      setValue(genderId, value, { shouldValidate: true });
-    }
-  }, [
-    preferNotToAnswerChecked,
-    setValue,
-    genderId,
-    preferNotToAnswerText,
-    value,
-  ]);
-
-  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setPreferNotToAnswerChecked(event.target.checked);
-    setValue(preferNotToAnswerId, event.target.checked);
-  };
-
-  return (
-    <fieldset className="usa-fieldset">
-      <div className={classNames('usa-form-group margin-top-2')}>
-        <label
-          className={classNames('usa-label', {
-            'usa-label--error': error,
-          })}
-          htmlFor={genderId}
-        >
-          {label || 'Gender identity'}
-          {required && <span className="required-indicator">*</span>}
-        </label>
-        {hint && (
-          <div className="usa-hint" id={hintId}>
-            {hint}
-          </div>
-        )}
-        {error && (
-          <div className="usa-error-message" id={errorId} role="alert">
-            {error.message}
-          </div>
-        )}
-        <input
-          className={classNames('usa-input', {
-            'usa-input--error': error,
-          })}
-          style={
-            preferNotToAnswerChecked
-              ? {
-                  backgroundColor: '#e9ecef',
-                  pointerEvents: 'none',
-                  opacity: 0.65,
-                }
-              : {}
-          }
-          id={genderId}
-          type="text"
-          defaultValue={value}
-          {...register(genderId, { required })}
-          aria-describedby={
-            `${hint ? `${hintId}` : ''}${error ? ` ${errorId}` : ''}`.trim() ||
-            undefined
-          }
-        />
-        {preferNotToAnswerText && (
-          <div className="usa-checkbox">
-            <input
-              className="usa-checkbox__input"
-              id={preferNotToAnswerId}
-              type="checkbox"
-              value="prefer-not-to-answer"
-              checked={preferNotToAnswerChecked}
-              {...register(preferNotToAnswerId)}
-              onChange={handleCheckboxChange}
-            />
-            <label
-              className="usa-checkbox__label"
-              htmlFor={preferNotToAnswerId}
-            >
-              {preferNotToAnswerText}
-            </label>
-          </div>
-        )}
-      </div>
-    </fieldset>
-  );
-};
diff --git a/packages/design/src/Form/components/GenderId/index.tsx b/packages/design/src/Form/components/GenderId/index.tsx
index 0ed40bec..0709523b 100644
--- a/packages/design/src/Form/components/GenderId/index.tsx
+++ b/packages/design/src/Form/components/GenderId/index.tsx
@@ -1,3 +1,114 @@
-import { GenderIdPattern } from './GenderId.js';
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { useFormContext } from 'react-hook-form';
+import { type GenderIdProps } from '@atj/forms';
+
+import { type PatternComponent } from '../../index.js';
+
+const GenderIdPattern: PatternComponent<GenderIdProps> = ({
+  genderId,
+  hint,
+  label,
+  required,
+  error,
+  value,
+  preferNotToAnswerText,
+  preferNotToAnswerChecked: initialPreferNotToAnswerChecked = false,
+}) => {
+  const { register, setValue } = useFormContext();
+  const [preferNotToAnswerChecked, setPreferNotToAnswerChecked] = useState(
+    initialPreferNotToAnswerChecked
+  );
+
+  const errorId = `input-error-message-${genderId}`;
+  const hintId = `hint-${genderId}`;
+  const preferNotToAnswerId = `prefer-not-to-answer-${genderId}`;
+
+  useEffect(() => {
+    if (preferNotToAnswerChecked) {
+      setValue(genderId, preferNotToAnswerText, { shouldValidate: true });
+    } else {
+      setValue(genderId, value, { shouldValidate: true });
+    }
+  }, [
+    preferNotToAnswerChecked,
+    setValue,
+    genderId,
+    preferNotToAnswerText,
+    value,
+  ]);
+
+  const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPreferNotToAnswerChecked(event.target.checked);
+    setValue(preferNotToAnswerId, event.target.checked);
+  };
+
+  return (
+    <fieldset className="usa-fieldset">
+      <div className={classNames('usa-form-group margin-top-2')}>
+        <label
+          className={classNames('usa-label', {
+            'usa-label--error': error,
+          })}
+          htmlFor={genderId}
+        >
+          {label || 'Gender identity'}
+          {required && <span className="required-indicator">*</span>}
+        </label>
+        {hint && (
+          <div className="usa-hint" id={hintId}>
+            {hint}
+          </div>
+        )}
+        {error && (
+          <div className="usa-error-message" id={errorId} role="alert">
+            {error.message}
+          </div>
+        )}
+        <input
+          className={classNames('usa-input', {
+            'usa-input--error': error,
+          })}
+          style={
+            preferNotToAnswerChecked
+              ? {
+                  backgroundColor: '#e9ecef',
+                  pointerEvents: 'none',
+                  opacity: 0.65,
+                }
+              : {}
+          }
+          id={genderId}
+          type="text"
+          defaultValue={value}
+          {...register(genderId, { required })}
+          aria-describedby={
+            `${hint ? `${hintId}` : ''}${error ? ` ${errorId}` : ''}`.trim() ||
+            undefined
+          }
+        />
+        {preferNotToAnswerText && (
+          <div className="usa-checkbox">
+            <input
+              className="usa-checkbox__input"
+              id={preferNotToAnswerId}
+              type="checkbox"
+              value="prefer-not-to-answer"
+              checked={preferNotToAnswerChecked}
+              {...register(preferNotToAnswerId)}
+              onChange={handleCheckboxChange}
+            />
+            <label
+              className="usa-checkbox__label"
+              htmlFor={preferNotToAnswerId}
+            >
+              {preferNotToAnswerText}
+            </label>
+          </div>
+        )}
+      </div>
+    </fieldset>
+  );
+};
 
 export default GenderIdPattern;