diff --git a/resources/assets/js/checkin.tsx b/resources/assets/js/checkin.tsx
index 23ce902..80b5a88 100644
--- a/resources/assets/js/checkin.tsx
+++ b/resources/assets/js/checkin.tsx
@@ -3,4 +3,4 @@ import * as ReactDOM from 'react-dom';
 import { CheckinForm } from './components/CheckinForm';
 
 const initialState = JSON.parse(document.getElementById('initialState')?.textContent as string);
-ReactDOM.render(<CheckinForm initialState={initialState}/>, document.getElementById('checkinForm'));
+ReactDOM.render(<CheckinForm initialState={initialState} />, document.getElementById('checkinForm'));
diff --git a/resources/assets/js/components/CheckBox.tsx b/resources/assets/js/components/CheckBox.tsx
new file mode 100644
index 0000000..30a7226
--- /dev/null
+++ b/resources/assets/js/components/CheckBox.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+type CheckboxProps = {
+    id: string;
+    name: string;
+    className?: string;
+    checked?: boolean;
+    onChange?: (newValue: boolean) => void;
+};
+
+export const CheckBox: React.FC<CheckboxProps> = ({ id, name, className, checked, onChange, children }) => (
+    <div className={`custom-control custom-checkbox ${className}`}>
+        <input
+            id={id}
+            name={name}
+            type="checkbox"
+            className="custom-control-input"
+            checked={checked}
+            onChange={(e) => onChange && onChange(e.target.checked)}
+        />
+        <label className="custom-control-label" htmlFor={id}>
+            {children}
+        </label>
+    </div>
+);
diff --git a/resources/assets/js/components/CheckinForm.tsx b/resources/assets/js/components/CheckinForm.tsx
index 5931869..442b436 100644
--- a/resources/assets/js/components/CheckinForm.tsx
+++ b/resources/assets/js/components/CheckinForm.tsx
@@ -1,49 +1,12 @@
 import * as React from 'react';
 import { useState } from 'react';
 import * as classNames from 'classnames';
+import { CheckBox } from './CheckBox';
+import { FieldError, StandaloneFieldError } from './FieldError';
 import { TagInput } from './TagInput';
 import { MetadataPreview } from './MetadataPreview';
 
-type CheckboxProps = {
-    id: string;
-    name: string;
-    className?: string;
-    checked?: boolean;
-    onChange?: (newValue: boolean) => void;
-};
-
-const Checkbox: React.FC<CheckboxProps> = ({ id, name, className, checked, onChange, children }) => (
-    <div className={`custom-control custom-checkbox ${className}`}>
-        <input
-            id={id}
-            name={name}
-            type="checkbox"
-            className="custom-control-input"
-            checked={checked}
-            onChange={(e) => onChange && onChange(e.target.checked)}
-        />
-        <label className="custom-control-label" htmlFor={id}>
-            {children}
-        </label>
-    </div>
-);
-
-type FieldErrorProps = {
-    errors?: string[];
-};
-
-const FieldError: React.FC<FieldErrorProps> = ({ errors }) =>
-    (errors && errors.length > 0 && <div className="invalid-feedback">{errors[0]}</div>) || null;
-
-const StandaloneFieldError: React.FC<FieldErrorProps> = ({ errors }) =>
-    (errors && errors.length > 0 && (
-        <div className="form-group col-sm-12" style={{ marginTop: '-1rem' }}>
-            <small className="text-danger">{errors[0]}</small>
-        </div>
-    )) ||
-    null;
-
-export type CheckinFormProps = {
+type CheckinFormProps = {
     initialState: any;
 };
 
@@ -157,7 +120,7 @@ export const CheckinForm: React.FC<CheckinFormProps> = ({ initialState }) => {
             <div className="form-row mt-4">
                 <p>オプション</p>
                 <div className="form-group col-sm-12">
-                    <Checkbox
+                    <CheckBox
                         id="isPrivate"
                         name="is_private"
                         className="mb-3"
@@ -165,8 +128,8 @@ export const CheckinForm: React.FC<CheckinFormProps> = ({ initialState }) => {
                         onChange={(v) => setPrivate(v)}
                     >
                         <span className="oi oi-lock-locked" /> このチェックインを非公開にする
-                    </Checkbox>
-                    <Checkbox
+                    </CheckBox>
+                    <CheckBox
                         id="isTooSensitive"
                         name="is_too_sensitive"
                         className="mb-3"
@@ -174,7 +137,7 @@ export const CheckinForm: React.FC<CheckinFormProps> = ({ initialState }) => {
                         onChange={(v) => setTooSensitive(v)}
                     >
                         <span className="oi oi-warning" /> チェックイン対象のオカズをより過激なオカズとして設定する
-                    </Checkbox>
+                    </CheckBox>
                 </div>
             </div>
             <div className="text-center">
diff --git a/resources/assets/js/components/FieldError.tsx b/resources/assets/js/components/FieldError.tsx
new file mode 100644
index 0000000..61ec77e
--- /dev/null
+++ b/resources/assets/js/components/FieldError.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+type FieldErrorProps = {
+    errors?: string[];
+};
+
+export const FieldError: React.FC<FieldErrorProps> = ({ errors }) =>
+    (errors && errors.length > 0 && <div className="invalid-feedback">{errors[0]}</div>) || null;
+
+export const StandaloneFieldError: React.FC<FieldErrorProps> = ({ errors }) =>
+    (errors && errors.length > 0 && (
+        <div className="form-group col-sm-12" style={{ marginTop: '-1rem' }}>
+            <small className="text-danger">{errors[0]}</small>
+        </div>
+    )) ||
+    null;