128848 change custom-checkbox to form-check

apps/app/src/components/Admin/App/AppSetting.jsx

@@ -145,7 +145,7 @@ const AppSetting = (props) => {
           {/* {t('admin:app_setting.file_uploading')} */}
         </label>
         <div className="col-md-6">
-          <div className="custom-control custom-checkbox custom-checkbox-info">
+          <div className="custom-control form-check form-check-info">
             <input
               type="checkbox"
               id="cbFileUpload"

apps/app/src/components/Admin/App/QuestionnaireSettings.tsx

@@ -72,7 +72,7 @@ const QuestionnaireSettings = (): JSX.Element => {
       {!isLoading && (
         <>
           <div className="row my-3">
-            <div className="custom-control custom-switch custom-checkbox-info col-md-5 offset-md-5">
+            <div className="custom-control custom-switch form-check-info col-md-5 offset-md-5">
               <input
                 type="checkbox"
                 className="custom-control-input"
@@ -87,7 +87,7 @@ const QuestionnaireSettings = (): JSX.Element => {
           </div>
 
           <div className="row my-4">
-            <div className="custom-control custom-checkbox custom-checkbox-info col-md-5 offset-md-5">
+            <div className="custom-control form-check form-check-info col-md-5 offset-md-5">
               <input
                 type="checkbox"
                 className="custom-control-input"

apps/app/src/components/Admin/Customize/CustomizeFunctionOption.tsx

@@ -16,7 +16,7 @@ const CustomizeFunctionOption = (props: Props): JSX.Element => {
 
   return (
     <React.Fragment>
-      <div className="custom-control custom-checkbox custom-checkbox-success">
+      <div className="custom-control form-check form-check-success">
         <input
           className="custom-control-input"
           type="checkbox"

apps/app/src/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx

@@ -107,10 +107,10 @@ const SelectCollectionsModal = (props: Props): JSX.Element => {
   }, [selectedCollections, t]);
 
   const renderCheckboxes = useCallback((collectionNames, color?) => {
-    const checkboxColor = color ? `custom-checkbox-${color}` : 'custom-checkbox-info';
+    const checkboxColor = color ? `form-check-${color}` : 'form-check-info';
 
     return (
-      <div className={`custom-control custom-checkbox ${checkboxColor}`}>
+      <div className={`custom-control form-check ${checkboxColor}`}>
         <div className="row">
           {collectionNames.map((collectionName) => {
             return (

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportCollectionConfigurationModal.jsx

@@ -66,7 +66,7 @@ class ImportCollectionConfigurationModal extends React.Component {
     /* eslint-disable react/no-unescaped-entities */
     return (
       <>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             id="cbOpt4"
             type="checkbox"
@@ -79,7 +79,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
           </label>
         </div>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             id="cbOpt1"
             type="checkbox"
@@ -95,7 +95,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             />
           </label>
         </div>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             id="cbOpt2"
             type="checkbox"
@@ -111,7 +111,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             />
           </label>
         </div>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             id="cbOpt3"
             type="checkbox"
@@ -127,7 +127,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             />
           </label>
         </div>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             id="cbOpt5"
             type="checkbox"
@@ -140,7 +140,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_meta_datas.desc`) }} />
           </label>
         </div>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             id="cbOpt6"
             type="checkbox"
@@ -167,7 +167,7 @@ class ImportCollectionConfigurationModal extends React.Component {
     /* eslint-disable react/no-unescaped-entities */
     return (
       <>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             id="cbOpt1"
             type="checkbox"

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportCollectionItem.jsx

@@ -81,7 +81,7 @@ export default class ImportCollectionItem extends React.Component {
     } = this.props;
 
     return (
-      <div className="custom-control custom-checkbox custom-checkbox-info my-0">
+      <div className="custom-control form-check form-check-info my-0">
         <input
           type="checkbox"
           id={collectionName}

apps/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -78,7 +78,7 @@ class SlackConfiguration extends React.Component {
 
             <div className="row mb-3">
               <div className="offset-md-3 col-md-6 text-left">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

apps/app/src/components/Admin/MarkdownSetting/IndentForm.tsx

@@ -74,7 +74,7 @@ const IndentForm = (props: Props) => {
 
     return (
       <div className="col">
-        <div className="custom-control custom-checkbox custom-checkbox-success">
+        <div className="custom-control form-check form-check-success">
           <input
             type="checkbox"
             className="custom-control-input"

apps/app/src/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -43,7 +43,7 @@ class LineBreakForm extends React.Component {
 
     return (
       <div className="col">
-        <div className="custom-control custom-checkbox custom-checkbox-success">
+        <div className="custom-control form-check form-check-success">
           <input
             type="checkbox"
             className="custom-control-input"
@@ -68,7 +68,7 @@ class LineBreakForm extends React.Component {
 
     return (
       <div className="col">
-        <div className="custom-control custom-checkbox custom-checkbox-success">
+        <div className="custom-control form-check form-check-success">
           <input
             type="checkbox"
             className="custom-control-input"

apps/app/src/components/Admin/MarkdownSetting/XssForm.jsx

@@ -120,7 +120,7 @@ class XssForm extends React.Component {
         <fieldset className="col-12">
           <div className="form-group">
             <div className="col-8 offset-4 my-3">
-              <div className="custom-control custom-switch custom-checkbox-success">
+              <div className="custom-control custom-switch form-check-success">
                 <input
                   type="checkbox"
                   className="custom-control-input"

apps/app/src/components/Admin/Notification/GlobalNotification.jsx

@@ -42,7 +42,7 @@ const GlobalNotification = (props) => {
       </p>
       <div className="row mb-4">
         <div className="col-md-8 offset-md-2">
-          <div className="custom-control custom-checkbox custom-checkbox-success">
+          <div className="custom-control form-check form-check-success">
             <input
               id="isNotificationForOwnerPageEnabled"
               className="custom-control-input"
@@ -60,7 +60,7 @@ const GlobalNotification = (props) => {
 
       <div className="row mb-4">
         <div className="col-md-8 offset-md-2">
-          <div className="custom-control custom-checkbox custom-checkbox-success">
+          <div className="custom-control form-check form-check-success">
             <input
               id="isNotificationForGroupPageEnabled"
               className="custom-control-input"

apps/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -80,7 +80,7 @@ class GlobalNotificationList extends React.Component {
           return (
             <tr key={notification._id}>
               <td className="align-middle td-abs-center">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-switch form-check-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

apps/app/src/components/Admin/Notification/TriggerEventCheckBox.jsx

@@ -7,7 +7,7 @@ const TriggerEventCheckBox = (props) => {
   const { t } = props;
 
   return (
-    <div className={`custom-control custom-checkbox custom-checkbox-${props.checkbox}`}>
+    <div className={`custom-control form-check form-check-${props.checkbox}`}>
       <input
         className="custom-control-input"
         type="checkbox"

apps/app/src/components/Admin/Security/GitHubSecuritySettingContents.jsx

@@ -58,7 +58,7 @@ class GitHubSecurityManagementContents extends React.Component {
 
         <div className="form-group row">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-switch form-check-success">
               <input
                 id="isGitHubEnabled"
                 className="custom-control-input"
@@ -137,7 +137,7 @@ class GitHubSecurityManagementContents extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6 text-left">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     id="bindByUserNameGitHub"
                     className="custom-control-input"

apps/app/src/components/Admin/Security/GoogleSecuritySettingContents.jsx

@@ -56,7 +56,7 @@ class GoogleSecurityManagementContents extends React.Component {
 
         <div className="form-group row">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-switch form-check-success">
               <input
                 id="isGoogleEnabled"
                 className="custom-control-input"
@@ -135,7 +135,7 @@ class GoogleSecurityManagementContents extends React.Component {
 
             <div className="row mb-5">
               <div className="offset-3 col-6">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     id="bindByUserNameGoogle"
                     className="custom-control-input"

apps/app/src/components/Admin/Security/LdapSecuritySettingContents.jsx

@@ -60,7 +60,7 @@ class LdapSecuritySettingContents extends React.Component {
 
         <div className="form-group row">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-switch form-check-success">
               <input
                 id="isLdapEnabled"
                 className="custom-control-input"
@@ -260,7 +260,7 @@ class LdapSecuritySettingContents extends React.Component {
 
             <div className="form-group row">
               <div className="offset-md-3 col-md-6">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

apps/app/src/components/Admin/Security/LocalSecuritySettingContents.jsx

@@ -64,7 +64,7 @@ class LocalSecuritySettingContents extends React.Component {
 
         <div className="row mb-5">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-switch form-check-success">
               <input
                 type="checkbox"
                 className="custom-control-input"
@@ -165,7 +165,7 @@ class LocalSecuritySettingContents extends React.Component {
             <div className="row">
               <label className="col-12 col-md-3 text-left text-md-right  col-form-label">{t('security_settings.Local.password_reset_by_users')}</label>
               <div className="col-12 col-md-6">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-switch form-check-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"
@@ -194,7 +194,7 @@ class LocalSecuritySettingContents extends React.Component {
             <div className="row">
               <label className="col-12 col-md-3 text-left text-md-right  col-form-label">{t('security_settings.Local.email_authentication')}</label>
               <div className="col-12 col-md-6">
-                <div className="custom-control custom-switch custom-checkbox-success">
+                <div className="custom-control custom-switch form-check-success">
                   <input
                     type="checkbox"
                     className="custom-control-input"

apps/app/src/components/Admin/Security/OidcSecuritySettingContents.jsx

@@ -50,7 +50,7 @@ class OidcSecurityManagementContents extends React.Component {
 
         <div className="row mb-5 form-group">
           <div className="offset-3 col-6">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-switch form-check-success">
               <input
                 id="isOidcEnabled"
                 className="custom-control-input"
@@ -387,7 +387,7 @@ class OidcSecurityManagementContents extends React.Component {
 
             <div className="row mb-5 form-group">
               <div className="offset-md-3 col-md-6">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     id="bindByUserName-oidc"
                     className="custom-control-input"
@@ -409,7 +409,7 @@ class OidcSecurityManagementContents extends React.Component {
 
             <div className="row mb-5 form-group">
               <div className="offset-md-3 col-md-6">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     id="bindByEmail-oidc"
                     className="custom-control-input"

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -66,7 +66,7 @@ class SamlSecurityManagementContents extends React.Component {
 
         <div className="row form-group mb-5">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-switch form-check-success">
               <input
                 id="isSamlEnabled"
                 className="custom-control-input"
@@ -392,7 +392,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
             <div className="row form-group mb-5">
               <div className="offset-md-3 col-md-6 text-left">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     id="bindByUserName-SAML"
                     className="custom-control-input"
@@ -414,7 +414,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
 
             <div className="row form-group mb-5">
               <div className="offset-md-3 col-md-6 text-left">
-                <div className="custom-control custom-checkbox custom-checkbox-success">
+                <div className="custom-control form-check form-check-success">
                   <input
                     id="bindByEmail-SAML"
                     className="custom-control-input"

apps/app/src/components/Admin/Security/SecuritySetting.jsx

@@ -356,7 +356,7 @@ class SecuritySetting extends React.Component {
               <tr>
                 <th scope="row">{ t('only_me') }</th>
                 <td>
-                  <div className="custom-control custom-switch custom-checkbox-success">
+                  <div className="custom-control custom-switch form-check-success">
                     <input
                       type="checkbox"
                       className="custom-control-input"
@@ -373,7 +373,7 @@ class SecuritySetting extends React.Component {
               <tr>
                 <th scope="row">{ t('only_inside_the_group') }</th>
                 <td>
-                  <div className="custom-control custom-switch custom-checkbox-success">
+                  <div className="custom-control custom-switch form-check-success">
                     <input
                       type="checkbox"
                       className="custom-control-input"
@@ -456,7 +456,7 @@ class SecuritySetting extends React.Component {
         <h4>{t('security_settings.user_homepage_deletion.user_homepage_deletion')}</h4>
         <div className="row mb-4">
           <div className="col-6 offset-3">
-            <div className="custom-control custom-switch custom-checkbox-success">
+            <div className="custom-control custom-switch form-check-success">
               <input
                 type="checkbox"
                 className="custom-control-input"

apps/app/src/components/Admin/Security/ShareLinkSetting.tsx

@@ -116,7 +116,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
       <h4>{t('security_settings.share_link_rights')}</h4>
       <div className="row mb-5">
         <div className="col-6 offset-3">
-          <div className="custom-control custom-switch custom-checkbox-success">
+          <div className="custom-control custom-switch form-check-success">
             <input
               type="checkbox"
               className="custom-control-input"

apps/app/src/components/Admin/SlackIntegration/ManageCommandsProcess.jsx

@@ -305,7 +305,7 @@ const ManageCommandsProcess = ({
           </div>
         )}
 
-        <div className="custom-control custom-checkbox">
+        <div className="custom-control form-check">
           <div className="row mb-5 d-block">
             {defaultCommandsName.map(keyName => (
               <PermissionSettingForEachPermissionTypeComponent

apps/app/src/components/Admin/SlackIntegration/ManageCommandsProcessWithoutProxy.jsx

@@ -220,7 +220,7 @@ const ManageCommandsProcessWithoutProxy = ({ commandPermission, eventActionsPerm
       <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
-          <div className="custom-control custom-checkbox">
+          <div className="custom-control form-check">
             <div className="row mb-5 d-block">
               { defaultCommandsName.map((commandName) => {
                 // eslint-disable-next-line max-len
@@ -241,7 +241,7 @@ const ManageCommandsProcessWithoutProxy = ({ commandPermission, eventActionsPerm
       <p className="mb-4 font-weight-bold">Events</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
-          <div className="custom-control custom-checkbox">
+          <div className="custom-control form-check">
             <div className="row mb-5 d-block">
               { defaultSupportedSlackEventActions.map(actionName => (
                 <SinglePermissionSettingComponent

apps/app/src/components/Admin/UserGroupDetail/CheckBoxForSerchUserOption.jsx

@@ -9,7 +9,7 @@ class CheckBoxForSerchUserOption extends React.Component {
   render() {
     const { t, option } = this.props;
     return (
-      <div className="custom-control custom-checkbox custom-checkbox-info" key={`isAlso${option}Searched`}>
+      <div className="custom-control form-check form-check-info" key={`isAlso${option}Searched`}>
         <input
           type="checkbox"
           id={`isAlso${option}Searched`}

apps/app/src/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx

@@ -43,7 +43,7 @@ export const UpdateParentConfirmModal: FC = () => {
                 {t('admin:user_group_management.update_parent_confirm_modal.danger_message')}
               </div>
 
-              <div className="custom-control custom-checkbox custom-checkbox-succsess pl-5">
+              <div className="custom-control form-check form-check-succsess pl-5">
                 <input
                   className="custom-control-input"
                   name="forceUpdateParents"

apps/app/src/components/Admin/UserManagement.tsx

@@ -81,7 +81,7 @@ const UserManagement = (props: UserManagementProps) => {
 
   const renderCheckbox = (status: string, statusLabel: string, statusColor: string) => {
     return (
-      <div className={`custom-control custom-checkbox custom-checkbox-${statusColor} mr-2`}>
+      <div className={`custom-control form-check form-check-${statusColor} mr-2`}>
         <input
           className="custom-control-input"
           type="checkbox"

apps/app/src/components/Admin/Users/UserInviteModal.jsx

@@ -105,7 +105,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <div className="col text-left custom-control custom-checkbox custom-checkbox-info text-left" onChange={this.handleCheckBox}>
+        <div className="col text-left custom-control form-check form-check-info text-left" onChange={this.handleCheckBox}>
           <input
             type="checkbox"
             id="sendEmail"

apps/app/src/components/Me/InAppNotificationSettings.tsx

@@ -74,7 +74,7 @@ const InAppNotificationSettings: FC = () => {
           {subscribeRulesMenuItems.map(rule => (
             <div
               key={rule.name}
-              className="custom-control custom-switch custom-checkbox-success"
+              className="custom-control custom-switch form-check-success"
             >
               <input
                 type="checkbox"

apps/app/src/components/Me/OtherSettings.tsx

@@ -53,7 +53,7 @@ const OtherSettings = (): JSX.Element => {
       <div className="form-group row">
         <div className="offset-md-3 col-md-6 text-left">
           {!isLoadingCurrentUser && (
-            <div className="custom-control custom-switch custom-checkbox-primary">
+            <div className="custom-control custom-switch form-check-primary">
               <span id="grw-questionnaire-settings-toggle-wrapper">
                 <input
                   type="checkbox"

apps/app/src/components/PageDeleteModal.tsx

@@ -182,7 +182,7 @@ const PageDeleteModal: FC = () => {
 
   function renderDeleteRecursivelyForm() {
     return (
-      <div className="custom-control custom-checkbox custom-checkbox-warning">
+      <div className="custom-control form-check form-check-warning">
         <input
           className="custom-control-input"
           id="deleteRecursively"
@@ -201,7 +201,7 @@ const PageDeleteModal: FC = () => {
 
   function renderDeleteCompletelyForm() {
     return (
-      <div className="custom-control custom-checkbox custom-checkbox-danger">
+      <div className="custom-control form-check form-check-danger">
         <input
           className="custom-control-input"
           name="completely"

apps/app/src/components/PageDuplicateModal.tsx

@@ -193,7 +193,7 @@ const PageDuplicateModal = (): JSX.Element => {
           <p className="text-danger">Error: Target path is duplicated.</p>
         ) }
 
-        <div className="custom-control custom-checkbox custom-checkbox-warning mb-3">
+        <div className="custom-control form-check form-check-warning mb-3">
           <input
             className="custom-control-input"
             name="recursively"
@@ -209,7 +209,7 @@ const PageDuplicateModal = (): JSX.Element => {
 
           <div>
             {isDuplicateRecursively && existingPaths.length !== 0 && (
-              <div className="custom-control custom-checkbox custom-checkbox-warning">
+              <div className="custom-control form-check form-check-warning">
                 <input
                   className="custom-control-input"
                   name="withoutExistRecursively"

apps/app/src/components/PageEditor/LinkEditModal.tsx

@@ -301,7 +301,7 @@ export const LinkEditModal = (): JSX.Element => {
           <div className="form-group mb-0 row">
             <label className="col-sm-3">{t('link_edit.path_format')}</label>
             <div className="col-sm-9">
-              <div className="custom-control custom-checkbox custom-checkbox-info custom-control-inline">
+              <div className="custom-control form-check form-check-info custom-control-inline">
                 <input
                   className="custom-control-input"
                   id="relativePath"
@@ -314,7 +314,7 @@ export const LinkEditModal = (): JSX.Element => {
                   {t('link_edit.use_relative_path')}
                 </label>
               </div>
-              <div className="custom-control custom-checkbox custom-checkbox-info custom-control-inline">
+              <div className="custom-control form-check form-check-info custom-control-inline">
                 <input
                   className="custom-control-input"
                   id="permanentLink"

apps/app/src/components/PageRenameModal.tsx

@@ -292,7 +292,7 @@ const PageRenameModal = (): JSX.Element => {
           </button>
         </p>
         <Collapse isOpen={expandOtherOptions}>
-          <div className="custom-control custom-checkbox custom-checkbox-success">
+          <div className="custom-control form-check form-check-success">
             <input
               className="custom-control-input"
               name="create_redirect"
@@ -307,7 +307,7 @@ const PageRenameModal = (): JSX.Element => {
             </label>
           </div>
 
-          <div className="custom-control custom-checkbox custom-checkbox-success">
+          <div className="custom-control form-check form-check-success">
             <input
               className="custom-control-input"
               name="remain_metadata"

apps/app/src/components/PrivateLegacyPages.tsx

@@ -103,7 +103,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
           </div>
           <select
             defaultValue={pagingSize}
-            className="custom-select"
+            className="form-select"
             id="inputGroupSelect01"
             onChange={e => onPagingSizeChanged(Number(e.target.value))}
           >

apps/app/src/components/PrivateLegacyPagesMigrationModal.tsx

@@ -47,7 +47,7 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
 
   function renderForm() {
     return (
-      <div className="custom-control custom-checkbox custom-checkbox-warning">
+      <div className="custom-control form-check form-check-warning">
         <input
           className="custom-control-input"
           id="convertRecursively"

apps/app/src/components/PutbackPageModal.jsx

@@ -75,7 +75,7 @@ const PutBackPageModal = () => {
           <label>{t('modal_putback.label.Put Back Page')}:</label><br />
           <code>{path}</code>
         </div>
-        <div className="custom-control custom-checkbox custom-checkbox-warning">
+        <div className="custom-control form-check form-check-warning">
           <input
             className="custom-control-input"
             id="cbPutBackRecursively"

apps/app/src/components/SearchPage.tsx

@@ -73,7 +73,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
         </div>
         <select
           defaultValue={pagingSize}
-          className="custom-select"
+          className="form-select"
           id="inputGroupSelect01"
           onChange={e => onPagingSizeChanged(Number(e.target.value))}
         >

apps/app/src/components/SearchPage/SearchControl.tsx

@@ -122,7 +122,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
             </div>
             <div className="d-none d-lg-flex align-items-center ml-auto search-control-include-options">
               <div className="border rounded px-2 py-1 mr-3">
-                <div className="custom-control custom-checkbox custom-checkbox-succsess">
+                <div className="custom-control form-check form-check-succsess">
                   <input
                     className="custom-control-input mr-2"
                     type="checkbox"
@@ -136,7 +136,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
                 </div>
               </div>
               <div className="border rounded px-2 py-1">
-                <div className="custom-control custom-checkbox custom-checkbox-succsess">
+                <div className="custom-control form-check form-check-succsess">
                   <input
                     className="custom-control-input mr-2"
                     type="checkbox"

apps/app/src/components/Sidebar/AppearanceModeDropdown.tsx

@@ -80,7 +80,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
               <IconWithTooltip id={isEditMode ? 'iwt-sidebar-editor-drawer' : 'iwt-sidebar-drawer'} label="Drawer" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDrawerIcon />
               </IconWithTooltip>
-              <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
+              <div className="custom-control custom-switch form-check-secondary ml-2">
                 <input
                   id={isEditMode ? 'swSidebarModeOnEditor' : 'swSidebarMode'}
                   className="custom-control-input"
@@ -134,7 +134,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                   <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                     <SunIcon />
                   </IconWithTooltip>
-                  <div className="custom-control custom-switch custom-checkbox-secondary ml-2">
+                  <div className="custom-control custom-switch form-check-secondary ml-2">
                     <input
                       id="swUserPreference"
                       className="custom-control-input"
@@ -152,7 +152,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
               </div>
               <div className="form-row">
                 <div className="form-group col-auto">
-                  <div className="custom-control custom-checkbox">
+                  <div className="custom-control form-check">
                     <input
                       id="cbFollowOs"
                       className="custom-control-input"

apps/app/src/styles/atoms/_custom_control.scss

@@ -2,7 +2,7 @@
 
 // TODO: activate (https://redmine.weseek.co.jp/issues/128307)
 
-// .custom-checkbox .custom-control-label::before {
+// .form-check .custom-control-label::before {
 //   border-radius: $border-radius !important;
 // }
 

apps/app/src/styles/theme/_apply-colors-dark.scss

@@ -76,7 +76,7 @@
   //     */
   //   input.form-control,
   //   select.form-control,
-  //   select.custom-select,
+  //   select.form-select,
   //   textarea.form-control {
   //     color: var(--color-global);
   //     background-color: hsl.darken(var(--bgcolor-global), 5%);

apps/app/src/styles/theme/_reboot-bootstrap-theme-colors.scss

@@ -47,7 +47,7 @@
 }
 
 @each $theme-color, $color in $theme-colors {
-  .custom-checkbox-#{$theme-color} {
+  .form-check-#{$theme-color} {
     .custom-control-label::before {
       border-color: $input-border-color;
       transition: 0.3s ease-in-out;

packages/core/scss/bootstrap/_variables.scss

@@ -100,8 +100,8 @@ $font-family-base: $font-family-sans-serif;
 
 // $custom-control-indicator-border-color: $gray-400;
 // $custom-control-label-disabled-color: $gray-500;
-// $custom-select-disabled-color: $gray-500;
-// $custom-range-thumb-disabled-bg: $gray-400;
+// $form-select-disabled-color: $gray-500;
+// $form-range-thumb-disabled-bg: $gray-400;
 
 //== Navs
 // $nav-link-padding-y: 0.75rem;
@@ -163,6 +163,6 @@ $font-family-base: $font-family-sans-serif;
 $pre-color: dummyinvalildcolor; // disable pre color specification with invalid value
 
 //== Custom Checkbox
-// $custom-checkbox-indicator-border-radius: 0px;
+// $form-check-indicator-border-radius: 0px;
 // $custom-control-indicator-focus-box-shadow: none;
 // $custom-control-indicator-size: 1.2rem;