diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 5dc2e4d..61fff12 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -560,20 +560,22 @@ td.group-title {
 
 /* The contents of the popup dialog on the views edit form. */
 .views-filterable-options .form-type-checkbox {
-  border: 1px solid #ccc;
   padding: 5px 8px;
   border-top: none;
 }
 .views-filterable-options {
   border-top:  1px solid #ccc;
 }
-.views-filterable-options .filterable-option.odd .form-type-checkbox {
+.views-filterable-options .filterable-option.odd td {
   background-color: #f3f4ee;
 }
 .filterable-option .form-item {
   margin-bottom: 0;
   margin-top: 0;
 }
+.views-filterable-options .filterable-option .title {
+  font-weight: bold;
+}
 .views-filterable-options .form-type-checkbox .description {
   margin-top: 0;
   margin-bottom: 0;
diff --git a/core/modules/views_ui/js/views-admin.js b/core/modules/views_ui/js/views-admin.js
index 28e2e96..c443e85 100644
--- a/core/modules/views_ui/js/views-admin.js
+++ b/core/modules/views_ui/js/views-admin.js
@@ -292,6 +292,7 @@
   Drupal.viewsUi.AddItemForm.prototype.handleCheck = function (event) {
     var $target = $(event.target);
     var label = $.trim($target.next().html());
+    var label = $.trim($target.closest('td').next().html());
     // Add/remove the checked item to the list.
     if ($target.is(':checked')) {
       this.$selected_div.show().css('display', 'block');
@@ -447,7 +448,10 @@
      * Add a keyup handler to the search box.
      */
     this.$searchBox = this.$form.find('[data-drupal-selector="edit-override-controls-options-search"]');
-    this.$searchBox.on('keyup', $.proxy(this.handleKeyup, this));
+    this.$searchBox.on('keyup', $.proxy(this.handlefilter, this));
+
+    this.$filterType = this.$form.find('[data-drupal-selector="edit-override-controls-group"]');
+    this.$filterType.on('change', $.proxy(this.handlefilter, this));
 
     /**
      * Get a list of option labels and their corresponding divs and maintain it
@@ -456,7 +460,7 @@
     this.options = this.getOptions(this.$form.find('.filterable-option'));
 
     // Restripe on initial loading.
-    this.handleKeyup();
+    this.handlefilter();
     // Trap the ENTER key in the search box so that it doesn't submit the form.
     this.$searchBox.on('keypress', function (event) {
       if (event.which === 13) {
@@ -486,30 +490,32 @@
       for (var i = 0; i < length; i++) {
         $option = $($allOptions[i]);
         $label = $option.find('label');
-        $description = $option.find('div.description');
+        $description = $option.find('td.description');
         options[i] = {
           // Search on the lowercase version of the label text + description.
           searchText: $label.text().toLowerCase() + " " + $description.text().toLowerCase(),
           // Maintain a reference to the jQuery object for each row, so we don't
           // have to create a new object inside the performance-sensitive keyup
           // handler.
-          $div: $option
+          $div: $option,
+          className: $option.context.className
         };
       }
       return options;
     },
 
     /**
-     * Keyup handler for the search box that hides or shows the relevant
+     * Filter handler for the search box and type select that hides or shows the relevant
      * options.
      *
      * @param {jQuery.Event} event
-     *   The keyup event.
+     *   The keyup event or change event.
      */
-    handleKeyup: function (event) {
+    handlefilter: function (event) {
       var found;
       var option;
       var zebraClass;
+      var classes;
 
       // Determine the user's search query. The search text has been converted
       // to lowercase.
@@ -517,6 +523,9 @@
       var words = search.split(' ');
       var wordsLength = words.length;
 
+      // Get selected Group
+      var group = this.$filterType.val();
+
       // Start the counter for restriping rows.
       var zebraCounter = 0;
 
@@ -525,14 +534,24 @@
       for (var i = 0; i < length; i++) {
         // Use a local variable for the option being searched, for performance.
         option = this.options[i];
+        classes = option.className.split(' ');
+
         found = true;
         // Each word in the search string has to match the item in order for the
         // item to be shown.
-        for (var j = 0; j < wordsLength; j++) {
-          if (option.searchText.indexOf(words[j]) === -1) {
+        if (search) {
+          for (var j = 0; j < wordsLength; j++) {
+            if (option.searchText.indexOf(words[j]) === -1) {
+              found = false;
+            }
+          }
+        }
+        if (found && group != 'all') {
+          if (classes.indexOf(group) === -1) {
             found = false;
           }
         }
+
         if (found) {
           zebraClass = (zebraCounter % 2) ? 'odd' : 'even';
           // Show the checkbox row, and restripe it.
@@ -547,6 +566,7 @@
         }
       }
     }
+
   });
 
   /**
diff --git a/core/modules/views_ui/src/Form/Ajax/AddHandler.php b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
index 56cb435..d07f040 100644
--- a/core/modules/views_ui/src/Form/Ajax/AddHandler.php
+++ b/core/modules/views_ui/src/Form/Ajax/AddHandler.php
@@ -107,11 +107,17 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       $form['options']['name'] = array(
         '#prefix' => '<div class="views-radio-box form-checkboxes views-filterable-options">',
         '#suffix' => '</div>',
+        '#type' => 'table',
+        '#header' => array(
+          $this->t('Title'),
+          $this->t('Category'),
+          $this->t('Description'),
+        ),
+        '#tableselect' => TRUE,
+        '#js_select' => FALSE,
         '#tree' => TRUE,
-        '#default_value' => 'all',
       );
 
-      // Group options first to simplify the usage of #states.
       $grouped_options = array();
       foreach ($options as $key => $option) {
         $group = preg_replace('/[^a-z0-9]/', '-', strtolower($option['group']));
@@ -138,22 +144,25 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       foreach ($grouped_options as $group => $group_options) {
         foreach ($group_options as $key => $option) {
           $form['options']['name'][$key] = array(
-            '#type' => 'checkbox',
-            '#title' => $this->t('@group: @field', array('@group' => $option['group'], '@field' => $option['title'])),
-            '#description' => $option['help'],
-            '#return_value' => $key,
-            '#prefix' => "<div class='filterable-option'>",
-            '#suffix' => '</div>',
-            '#states' => array(
-              'visible' => array(
-                array(
-                  ':input[name="override[controls][group]"]' => array('value' => 'all'),
-                ),
-                array(
-                  ':input[name="override[controls][group]"]' => array('value' => $group),
-                ),
-              )
-            )
+            '#tree' => TRUE,
+            '#attributes' => array(
+              'class' => array('filterable-option', $group),
+            ),
+            'title' => array(
+              '#markup' => $option['title'],
+              '#wrapper_attributes' => array(
+                'class' => array('title'),
+              ),
+            ),
+            'group' => array(
+              '#markup' => $option['group'],
+            ),
+            'help' => array(
+              '#markup' => $option['help'],
+              '#wrapper_attributes' => array(
+                'class' => array('description'),
+              ),
+            ),
           );
         }
       }