When checkbox list has more than 10 items, display it in a scrollable area

modules/backend/assets/css/october.css

@@ -7433,6 +7433,19 @@ label {
 .field-textarea.size-giant {
   min-height: 350px;
 }
+.field-checkboxlist-scrollable {
+  background: white;
+  border: 1px solid #e2e2e2;
+  padding-left: 15px;
+  height: 300px;
+}
+.field-checkboxlist-scrollable .checkbox {
+  margin-top: 15px;
+  margin-bottom: 5px;
+}
+.field-checkboxlist-scrollable .checkbox ~ .checkbox {
+  margin-top: 0;
+}
 .form-buttons {
   padding-bottom: 20px;
   font-size: 0;

modules/backend/assets/less/controls/forms.less

@@ -151,7 +151,7 @@ label {
 
     .custom-checkbox,
     .custom-radio {
-        label {cursor: default;}
+        label { cursor: default; }
     }
 }
 
@@ -171,6 +171,22 @@ label {
     &.size-giant { min-height: @size-giant; }
 }
 
+.field-checkboxlist-scrollable {
+    background: white;
+    border: 1px solid @color-list-border;
+    padding-left: 15px;
+    height: @size-large + 100;
+
+    // First checkbox
+    .checkbox {
+        margin-top: 15px;
+        margin-bottom: 5px;
+    }
+
+    // All others
+    .checkbox ~ .checkbox { margin-top: 0; }
+}
+
 .form-buttons {
     .clearfix();
     padding-bottom: 20px;

modules/backend/lang/en/lang.php

@@ -114,7 +114,10 @@ return [
         'or' => 'or',
         'confirm_tab_close' => 'Do you really want to close the tab? Unsaved changes will be lost.',
         'behavior_not_ready' => 'Form behavior has not been initialized, check that you have called initForm() in your controller.',
-        'preview_no_files_message' => 'Files are not uploaded'
+        'preview_no_files_message' => 'Files are not uploaded',
+        'select' => 'Select',
+        'select_all' => 'all',
+        'select_none' => 'none',
     ],
     'relation' => [
         'missing_definition' => "Relation behavior does not contain a definition for ':field'.",

modules/backend/widgets/form/partials/_field_checkboxlist.htm

@@ -4,6 +4,19 @@
 ?>
 <?php if (count($field->options)): ?>
 
+    <?php if (count($field->options) > 10): ?>
+        <!-- Quick selection -->
+        <small>
+            <?= e(trans('backend::lang.form.select')) ?>:
+            <a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', true)"><?= e(trans('backend::lang.form.select_all')) ?></a>,
+            <a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', false)"><?= e(trans('backend::lang.form.select_none')) ?></a>
+        </small>
+
+        <!-- Scrollable Checkbox list -->
+        <div class="field-checkboxlist-scrollable" id="<?= $field->getId('scrollable') ?>">
+            <div class="control-scrollbar" data-control="scrollbar">
+    <?php endif ?>
+
     <?php $index = 0; foreach ($field->options as $value => $option): ?>
         <?php
             $index++;
@@ -12,7 +25,6 @@
                 $option = array($option);
         ?>
         <div class="checkbox custom-checkbox">
-
             <input
                 type="checkbox"
                 id="<?= $checkboxId ?>"
@@ -30,6 +42,11 @@
         </div>
     <?php endforeach ?>
 
+    <?php if (count($field->options) > 10): ?>
+            </div>
+        </div>
+    <?php endif ?>
+
 <?php else: ?>
 
     <!-- No options specified -->