diff --git a/src/components/Button/Button.spec.tsx b/src/components/Button/Button.spec.tsx
new file mode 100644
index 00000000..5acc876c
--- /dev/null
+++ b/src/components/Button/Button.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Button } from './Button';
+
+describe('Button', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLButtonElement>();
+    render(<Button ref={ref}>Test</Button>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('BUTTON');
+  });
+});
diff --git a/src/components/Checkbox/Checkbox.spec.tsx b/src/components/Checkbox/Checkbox.spec.tsx
new file mode 100644
index 00000000..6df80e91
--- /dev/null
+++ b/src/components/Checkbox/Checkbox.spec.tsx
@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Checkbox } from './Checkbox';
+
+describe('Checkbox', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <Checkbox name="test" value="test" ref={ref}>
+        Test
+      </Checkbox>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('INPUT');
+    expect(ref.current?.type).toBe('checkbox');
+  });
+});
diff --git a/src/stories/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
similarity index 98%
rename from src/stories/Checkbox.stories.tsx
rename to src/components/Checkbox/Checkbox.stories.tsx
index dfec6200..f0f6fdf4 100644
--- a/src/stories/Checkbox.stories.tsx
+++ b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState, useCallback } from 'react';
-import { Checkbox, CheckboxGroup, Stack } from '../';
+import { Checkbox, CheckboxGroup, Stack } from '../../index';
 import type { ChangeEventHandler } from 'react';
 
 export default {
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 265e842d..1e9bffea 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -2,8 +2,9 @@
 
 import { CheckAIcon } from '@ubie/ubie-icons';
 import clsx from 'clsx';
-import { FC, InputHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
 import styles from './Checkbox.module.css';
+import type { InputHTMLAttributes } from 'react';
 
 type Props = {
   /**
@@ -29,14 +30,16 @@ type Props = {
   onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value' | 'children' | 'onChange'>;
 
-export const Checkbox: FC<Props> = ({ size = 'medium', children, ...otherProps }) => {
+export const Checkbox = forwardRef<HTMLInputElement, Props>(({ size = 'medium', children, ...otherProps }, ref) => {
   return (
     <label className={clsx(styles.container, styles[size])}>
-      <input type="checkbox" className={styles.checkbox} {...otherProps} />
+      <input ref={ref} type="checkbox" className={styles.checkbox} {...otherProps} />
       <span className={styles.checkIconContainer}>
         <CheckAIcon className={styles.checkIcon} />
       </span>
       {children}
     </label>
   );
-};
+});
+
+Checkbox.displayName = 'Checkbox';
diff --git a/src/components/CheckboxGroup/CheckboxGroup.spec.tsx b/src/components/CheckboxGroup/CheckboxGroup.spec.tsx
new file mode 100644
index 00000000..77300544
--- /dev/null
+++ b/src/components/CheckboxGroup/CheckboxGroup.spec.tsx
@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { CheckboxGroup } from './CheckboxGroup';
+
+describe('CheckboxGroup', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLFieldSetElement>();
+    render(
+      <CheckboxGroup label="test" ref={ref}>
+        <p>Test</p>
+        <p>Test</p>
+      </CheckboxGroup>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('FIELDSET');
+  });
+});
diff --git a/src/components/CheckboxGroup/CheckboxGroup.tsx b/src/components/CheckboxGroup/CheckboxGroup.tsx
index 0a2aface..3061d4fc 100644
--- a/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -1,46 +1,34 @@
 'use client';
 
+import { forwardRef } from 'react';
 import styles from './CheckboxGroup.module.css';
 import { RequiredLabel } from '../../sharedComponents/RequiredLabel/RequiredLabel';
-import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
+import { CustomDataAttributeProps } from '../../types/attributes';
 import { Checkbox } from '../Checkbox/Checkbox';
 import { Flex } from '../Flex/Flex';
-import type { FC, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 export type Props = {
   children: ReactElement<typeof Checkbox>[];
-  /**
-   * チェックボックスグループの見出し（legend要素）
-   */
   label: string;
-  /**
-   * 必須マークを表示するか
-   * 注意: trueとしてもinput要素のrequired属性は付与されません
-   */
   showRequiredLabel?: boolean;
-  /**
-   * チェックボックスの配置方向
-   * @default column
-   */
   direction?: 'column' | 'row';
 } & CustomDataAttributeProps;
 
-export const CheckboxGroup: FC<Props> = ({
-  children,
-  label,
-  showRequiredLabel,
-  direction = 'column',
-  ...otherProps
-}) => {
-  return (
-    <fieldset className={styles.wrapper} {...otherProps}>
-      <legend className={styles.legend}>
-        {label}
-        {showRequiredLabel && <RequiredLabel />}
-      </legend>
-      <Flex spacing="md" direction={direction}>
-        {children}
-      </Flex>
-    </fieldset>
-  );
-};
+export const CheckboxGroup = forwardRef<HTMLFieldSetElement, Props>(
+  ({ children, label, showRequiredLabel, direction = 'column', ...otherProps }, ref) => {
+    return (
+      <fieldset className={styles.wrapper} ref={ref} {...otherProps}>
+        <legend className={styles.legend}>
+          {label}
+          {showRequiredLabel && <RequiredLabel />}
+        </legend>
+        <Flex spacing="md" direction={direction}>
+          {children}
+        </Flex>
+      </fieldset>
+    );
+  },
+);
+
+CheckboxGroup.displayName = 'CheckboxGroup';
diff --git a/src/components/ErrorMessage/ErrorMessage.spec.tsx b/src/components/ErrorMessage/ErrorMessage.spec.tsx
new file mode 100644
index 00000000..c50e1263
--- /dev/null
+++ b/src/components/ErrorMessage/ErrorMessage.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { ErrorMessage } from './ErrorMessage';
+
+describe('ErrorMessage', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLParagraphElement>();
+    render(<ErrorMessage ref={ref}>Test</ErrorMessage>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('P');
+  });
+});
diff --git a/src/components/ErrorMessage/ErrorMessage.tsx b/src/components/ErrorMessage/ErrorMessage.tsx
index 749cba7e..9c5b7cf7 100644
--- a/src/components/ErrorMessage/ErrorMessage.tsx
+++ b/src/components/ErrorMessage/ErrorMessage.tsx
@@ -1,15 +1,18 @@
 'use client';
 
+import { forwardRef } from 'react';
 import styles from './ErrorMessage.module.css';
-import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
-import type { FC, ReactNode } from 'react';
+import { CustomDataAttributeProps } from '../../types/attributes';
+import type { ReactNode } from 'react';
 
 type Props = {
   children: ReactNode;
 } & CustomDataAttributeProps;
 
-export const ErrorMessage: FC<Props> = ({ children, ...otherProps }) => (
-  <p aria-live="polite" className={styles.error} {...otherProps}>
+export const ErrorMessage = forwardRef<HTMLParagraphElement, Props>(({ children, ...otherProps }, ref) => (
+  <p aria-live="polite" className={styles.error} ref={ref} {...otherProps}>
     {children}
   </p>
-);
+));
+
+ErrorMessage.displayName = 'ErrorMessage';
diff --git a/src/components/Input/Input.spec.tsx b/src/components/Input/Input.spec.tsx
new file mode 100644
index 00000000..e71bf6f9
--- /dev/null
+++ b/src/components/Input/Input.spec.tsx
@@ -0,0 +1,14 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Input } from './Input';
+
+describe('Input', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLInputElement>();
+
+    render(<Input name="test" value="test" ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('INPUT');
+    expect(ref.current?.type).toBe('text');
+  });
+});
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 7f47dc74..f251d9e1 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { clsx } from 'clsx';
-import { FC, forwardRef, InputHTMLAttributes } from 'react';
+import { forwardRef, InputHTMLAttributes } from 'react';
 import styles from './Input.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
 
@@ -18,7 +18,7 @@ type Props = {
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'invalid' | 'value'> &
   CustomDataAttributeProps;
 
-export const Input: FC<Props> = forwardRef<HTMLInputElement, Props>(({ isInvalid, ...props }, ref) => {
+export const Input = forwardRef<HTMLInputElement, Props>(({ isInvalid, ...props }, ref) => {
   const className = clsx({ [styles.isInvalid]: isInvalid && !props.disabled }, styles.input, props.className);
 
   return <input {...props} className={className} ref={ref} aria-invalid={isInvalid} />;
diff --git a/src/components/RadioButton/RadioButton.spec.tsx b/src/components/RadioButton/RadioButton.spec.tsx
new file mode 100644
index 00000000..008f8e24
--- /dev/null
+++ b/src/components/RadioButton/RadioButton.spec.tsx
@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { RadioButton } from './RadioButton';
+
+describe('RadioButton', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLInputElement>();
+    render(
+      <RadioButton
+        name="test"
+        value="test"
+        ref={ref}
+        onChange={() => {
+          /**/
+        }}
+        checked={false}
+      >
+        Test
+      </RadioButton>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('INPUT');
+    expect(ref.current?.type).toBe('radio');
+  });
+});
diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx
index 370d47c2..4cfbe8ea 100644
--- a/src/components/RadioButton/RadioButton.tsx
+++ b/src/components/RadioButton/RadioButton.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { FC, InputHTMLAttributes } from 'react';
+import { forwardRef, type InputHTMLAttributes } from 'react';
 import styles from './RadioButton.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
 
@@ -29,30 +29,27 @@ type Props = {
 } & RadioProps &
   CustomDataAttributeProps;
 
-export const RadioButton: FC<Props> = ({
-  size = 'medium',
-  checked,
-  onChange,
-  value,
-  name,
-  children,
-  ...otherProps
-}) => {
-  return (
-    <div className={clsx(styles[size])}>
-      <label className={styles.label}>
-        <input
-          type="radio"
-          checked={checked}
-          name={name}
-          value={value}
-          className={styles.radio}
-          onChange={onChange}
-          {...otherProps}
-        />
-        <span className={styles.icon} />
-        <span className={styles.text}>{children}</span>
-      </label>
-    </div>
-  );
-};
+export const RadioButton = forwardRef<HTMLInputElement, Props>(
+  ({ size = 'medium', checked, onChange, value, name, children, ...otherProps }, ref) => {
+    return (
+      <div className={clsx(styles[size])}>
+        <label className={styles.label}>
+          <input
+            type="radio"
+            checked={checked}
+            name={name}
+            value={value}
+            className={styles.radio}
+            onChange={onChange}
+            ref={ref}
+            {...otherProps}
+          />
+          <span className={styles.icon} />
+          <span className={styles.text}>{children}</span>
+        </label>
+      </div>
+    );
+  },
+);
+
+RadioButton.displayName = 'RadioButton';
diff --git a/src/components/RadioGroup/RadioGroup.spec.tsx b/src/components/RadioGroup/RadioGroup.spec.tsx
new file mode 100644
index 00000000..5ad09b1e
--- /dev/null
+++ b/src/components/RadioGroup/RadioGroup.spec.tsx
@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { RadioGroup } from './RadioGroup';
+
+describe('RadioGroup', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLFieldSetElement>();
+    render(
+      <RadioGroup label="test" ref={ref}>
+        <p>Test</p>
+        <p>Test</p>
+      </RadioGroup>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('FIELDSET');
+  });
+});
diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
index 695f2b9f..8c4bf754 100644
--- a/src/components/RadioGroup/RadioGroup.tsx
+++ b/src/components/RadioGroup/RadioGroup.tsx
@@ -1,12 +1,13 @@
 'use client';
 
+import { forwardRef } from 'react';
 import styles from './RadioGroup.module.css';
 import { RequiredLabel } from '../../sharedComponents/RequiredLabel/RequiredLabel';
 import { CustomDataAttributeProps } from '../../types/attributes'; // 追加したインポート
 import { Flex } from '../Flex/Flex';
 import { RadioButton } from '../RadioButton/RadioButton';
 import { RadioCard } from '../RadioCard/RadioCard';
-import type { FC, ReactElement } from 'react';
+import type { ReactElement } from 'react';
 
 type RadioComponent = ReactElement<typeof RadioButton> | ReactElement<typeof RadioCard>;
 
@@ -28,29 +29,27 @@ export type Props = {
   direction?: 'column' | 'row';
 } & CustomDataAttributeProps;
 
-export const RadioGroup: FC<Props> = ({
-  children,
-  label,
-  showRequiredLabel = false,
-  direction = 'column',
-  ...otherProps
-}) => {
-  const childrenIsCard = children.some((child) => child.type === RadioCard);
-  const childenIsBlock = direction === 'row' || (childrenIsCard && direction === 'column');
+export const RadioGroup = forwardRef<HTMLFieldSetElement, Props>(
+  ({ children, label, showRequiredLabel = false, direction = 'column', ...otherProps }, ref) => {
+    const childrenIsCard = children.some((child) => child.type === RadioCard);
+    const childenIsBlock = direction === 'row' || (childrenIsCard && direction === 'column');
 
-  return (
-    <fieldset className={styles.wrapper} {...otherProps}>
-      <legend className={styles.legend}>
-        {label}
-        {showRequiredLabel && <RequiredLabel />}
-      </legend>
-      <Flex
-        spacing={childrenIsCard ? 'sm' : 'md'}
-        alignItems={childenIsBlock ? 'normal' : undefined}
-        direction={direction}
-      >
-        {children}
-      </Flex>
-    </fieldset>
-  );
-};
+    return (
+      <fieldset className={styles.wrapper} ref={ref} {...otherProps}>
+        <legend className={styles.legend}>
+          {label}
+          {showRequiredLabel && <RequiredLabel />}
+        </legend>
+        <Flex
+          spacing={childrenIsCard ? 'sm' : 'md'}
+          alignItems={childenIsBlock ? 'normal' : undefined}
+          direction={direction}
+        >
+          {children}
+        </Flex>
+      </fieldset>
+    );
+  },
+);
+
+RadioGroup.displayName = 'RadioGroup';
diff --git a/src/components/Select/Select.spec.tsx b/src/components/Select/Select.spec.tsx
new file mode 100644
index 00000000..adc24947
--- /dev/null
+++ b/src/components/Select/Select.spec.tsx
@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Select } from './Select';
+
+describe('Select', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLSelectElement>();
+    render(<Select ref={ref}>Test</Select>);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('SELECT');
+  });
+});
diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
index 5f961f5c..f21dffb1 100644
--- a/src/components/Select/Select.tsx
+++ b/src/components/Select/Select.tsx
@@ -2,7 +2,7 @@
 
 import { UnfoldMoreIcon } from '@ubie/ubie-icons';
 import clsx from 'clsx';
-import { FC, forwardRef, InputHTMLAttributes } from 'react';
+import { forwardRef, InputHTMLAttributes } from 'react';
 import styles from './Select.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
 
@@ -27,7 +27,7 @@ type Props = CustomDataAttributeProps & {
   className?: string;
 } & Omit<InputHTMLAttributes<HTMLSelectElement>, 'id' | 'disabled'>;
 
-const Select: FC<Props> = forwardRef<HTMLSelectElement, Props>(
+const Select = forwardRef<HTMLSelectElement, Props>(
   ({ isInvalid = false, disabled = false, children, className, ...props }, ref) => {
     return (
       <div className={clsx({ [styles.isInvalid]: isInvalid, [styles.disabled]: disabled }, styles.wrapper, className)}>
diff --git a/src/components/TextArea/TextArea.spec.tsx b/src/components/TextArea/TextArea.spec.tsx
new file mode 100644
index 00000000..77df7d89
--- /dev/null
+++ b/src/components/TextArea/TextArea.spec.tsx
@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { TextArea } from './TextArea';
+
+describe('TextArea', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLTextAreaElement>();
+
+    render(
+      <TextArea name="test" value="test" ref={ref}>
+        Test
+      </TextArea>,
+    );
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('TEXTAREA');
+  });
+});
diff --git a/src/components/TextArea/TextArea.tsx b/src/components/TextArea/TextArea.tsx
index 3ad79714..6ff1c5fa 100644
--- a/src/components/TextArea/TextArea.tsx
+++ b/src/components/TextArea/TextArea.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import clsx from 'clsx';
-import { FC, TextareaHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
 import styles from './TextArea.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
+import type { TextareaHTMLAttributes } from 'react';
 
 type Props = {
   /**
@@ -23,8 +24,10 @@ type Props = {
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value'> &
   CustomDataAttributeProps;
 
-export const TextArea: FC<Props> = ({ isInvalid = false, className, ...props }) => {
+export const TextArea = forwardRef<HTMLTextAreaElement, Props>(({ isInvalid = false, className, ...props }, ref) => {
   const _className = clsx({ [styles.isInvalid]: isInvalid }, styles.textArea, className);
 
-  return <textarea {...props} className={_className} aria-invalid={isInvalid} />;
-};
+  return <textarea ref={ref} {...props} className={_className} aria-invalid={isInvalid} />;
+});
+
+TextArea.displayName = 'TextArea';
diff --git a/src/components/Toggle/Toggle.spec.tsx b/src/components/Toggle/Toggle.spec.tsx
new file mode 100644
index 00000000..15c08664
--- /dev/null
+++ b/src/components/Toggle/Toggle.spec.tsx
@@ -0,0 +1,19 @@
+import { render } from '@testing-library/react';
+import { createRef } from 'react';
+import { Toggle } from './Toggle';
+
+describe('Toggle', () => {
+  it('access to DOM through ref prop', () => {
+    const ref = createRef<HTMLInputElement>();
+
+    render(<Toggle name="test" value="test" ref={ref} />);
+    expect(ref.current).not.toBeNull();
+    expect(ref.current?.tagName).toBe('INPUT');
+    expect(ref.current?.type).toBe('checkbox');
+  });
+
+  it('has switch role', () => {
+    const { getByRole } = render(<Toggle name="test" value="test" />);
+    expect(getByRole('switch')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Toggle/Toggle.tsx b/src/components/Toggle/Toggle.tsx
index 97589254..fb473277 100644
--- a/src/components/Toggle/Toggle.tsx
+++ b/src/components/Toggle/Toggle.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { FC, InputHTMLAttributes, forwardRef, useRef, useState } from 'react';
+import { InputHTMLAttributes, forwardRef, useRef, useState } from 'react';
 import styles from './Toggle.module.css';
 import { CustomDataAttributeProps } from '../../types/attributes';
 
@@ -27,7 +27,7 @@ type Props = {
 } & Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> &
   CustomDataAttributeProps;
 
-export const Toggle: FC<Props> = forwardRef<HTMLInputElement, Props>(
+export const Toggle = forwardRef<HTMLInputElement, Props>(
   ({ checked: checkedProps, defaultChecked, onChange, ...otherProps }, ref) => {
     const { current: isUnControlled } = useRef(checkedProps === undefined);
     const [isUnControlledChecked, setIsUnControlledChecked] = useState(defaultChecked);