diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
index cd0db25dcd..334bd3807d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditBooleanMapModal.vue
@@ -11,42 +11,6 @@
     <p data-test="resources-selected-message">
       {{ $tr('resourcesSelected', { count: nodeIds.length }) }}
     </p>
-    <VAutocomplete
-      v-if="showAutocomplete"
-      :value="autocompleteValues"
-      :items="autocompleteOptions"
-      :searchInput.sync="searchQuery"
-      :label="autocompleteLabel"
-      box
-      clearable
-      chips
-      deletableChips
-      multiple
-      item-value="value"
-      item-text="label"
-      data-test="options-autocomplete"
-      :menu-props="{ height: 0, maxHeight: 0 } /* hide menu */"
-      @input="autocompleteInputUpdate"
-    >
-      <template #selection="data">
-        <VTooltip top lazy>
-          <template #activator="{ on, attrs }">
-            <VChip
-              v-bind="attrs"
-              :close="!data.item.undeletable"
-              data-test="option-chip"
-              v-on="on"
-              @input="setOption(data.item.value, false)"
-            >
-              {{ data.item.label }}
-            </VChip>
-          </template>
-          <div>
-            <div>{{ tooltipText(data.item.value) }}</div>
-          </div>
-        </VTooltip>
-      </template>
-    </VAutocomplete>
     <template v-if="isDescendantsUpdatable && isTopicSelected">
       <KCheckbox
         :checked="updateDescendants"
@@ -58,24 +22,12 @@
         :style="dividerStyle"
       >
     </template>
-    <div :style="optionsListStyle">
-      <KCheckbox
-        v-for="option in filteredOptions"
-        :key="option.value"
-        data-test="option-checkbox"
-        :label="option.label"
-        :style="treeItemStyle(option.value)"
-        :checked="isCheckboxSelected(option.value)"
-        :indeterminate="isCheckboxIndeterminate(option.value)"
-        @change="value => setOption(option.value, value)"
-      />
-      <p
-        v-if="!filteredOptions.length"
-        :style="{ color: $themeTokens.annotation }"
-      >
-        {{ emptyText || $tr('emptyOptionsSearch') }}
-      </p>
-    </div>
+    <slot
+      name="input"
+      :value="selectedValues"
+      :inputHandler="(value) => { selectedValues = value }"
+    ></slot>
+
     <span v-if="error" class="red--text">
       {{ error }}
     </span>
@@ -86,12 +38,15 @@
 
 <script>
 
+  /**
+   * EditBooleanMapModal
+   * This component is a modal responsible for reusing the logic of saving
+   * the edition of a boolean map field for multiple nodes.
+   */
   import { mapGetters, mapActions } from 'vuex';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { getInvalidText } from 'shared/utils/validation';
 
-  const MIXED = 'mixed';
-
   export default {
     name: 'EditBooleanMapModal',
     props: {
@@ -103,53 +58,14 @@
         type: String,
         required: true,
       },
-      options: {
-        type: Array,
-        required: true,
-      },
       title: {
         type: String,
         required: true,
       },
-      showAutocomplete: {
-        type: Boolean,
-        default: false,
-      },
-      autocompleteLabel: {
-        type: String,
-        default: '',
-      },
-      showHierarchy: {
-        type: Boolean,
-        default: false,
-      },
-      /**
-       * If the options are hierarchical, this function should return true if the first value
-       * is a sublevel of the second value
-       */
-      isSubLevel: {
-        type: Function,
-        default: (value1, value2) => value1.startsWith(value2),
-      },
-      /**
-       * If the options are hierarchical, this function should return the level of the option
-       */
-      getLevel: {
-        type: Function,
-        default: value => value.split('.').length,
-      },
       isDescendantsUpdatable: {
         type: Boolean,
         default: false,
       },
-      optionsListStyle: {
-        type: Object,
-        default: () => ({}),
-      },
-      emptyText: {
-        type: String,
-        default: '',
-      },
       confirmationMessage: {
         type: String,
         required: true,
@@ -162,16 +78,13 @@
     data() {
       return {
         updateDescendants: false,
-        searchQuery: '',
         error: '',
         /**
          * selectedValues is an object with the following structure:
          * {
-         *  [optionId]: true | [nodeId1, nodeId2, ...]
+         *  [optionId]: [nodeId1, nodeId2, ...]
          * }
-         * If the value is true, it means that the option is selected for all nodes
-         * If the value is an array of nodeIds, it means that the option is selected
-         * just for those nodes
+         * Where nodeIds is the id of the nodes that have the option selected
          */
         selectedValues: {},
       };
@@ -184,19 +97,6 @@
       isTopicSelected() {
         return this.nodes.some(node => node.kind === ContentKindsNames.TOPIC);
       },
-      filteredOptions() {
-        const searchQuery = this.searchQuery?.trim().toLowerCase();
-        if (!this.searchQuery) {
-          return this.options;
-        }
-        return this.options.filter(option => option.label.toLowerCase().includes(searchQuery));
-      },
-      flatList() {
-        if (!this.showHierarchy) {
-          return true;
-        }
-        return this.searchQuery && this.searchQuery.trim().length > 0;
-      },
       dividerStyle() {
         return {
           border: 0,
@@ -204,24 +104,10 @@
           margin: '1em 0',
         };
       },
-      autocompleteOptions() {
-        return [
-          {
-            value: MIXED,
-            label: this.$tr('mixedLabel'),
-            undeletable: true,
-          },
-          ...this.options,
-        ];
-      },
-      autocompleteValues() {
-        const selectedValues = Object.entries(this.selectedValues)
-          .filter(entry => entry[1] === true) // no mixed values
-          .map(([key]) => key);
-        if (Object.values(this.selectedValues).some(value => value !== true)) {
-          selectedValues.push(MIXED);
-        }
-        return selectedValues;
+    },
+    watch: {
+      selectedValues() {
+        this.validate();
       },
     },
     created() {
@@ -236,86 +122,20 @@
           });
       });
 
-      Object.entries(optionsNodes).forEach(([key, nodeIds]) => {
-        if (nodeIds.length === this.nodeIds.length) {
-          this.selectedValues[key] = true;
-        } else {
-          this.selectedValues[key] = nodeIds;
-        }
-      });
+      this.selectedValues = optionsNodes;
     },
     methods: {
       ...mapActions('contentNode', ['updateContentNode', 'updateContentNodeDescendants']),
       close() {
         this.$emit('close');
       },
-      isCheckboxSelected(optionId) {
-        // If the value is truthy (true or an array of nodeIds) then
-        // it is selected just if it is true (not an array)
-        if (this.selectedValues[optionId]) {
-          return this.selectedValues[optionId] === true;
-        }
-        // If we dont want to show a hierarchy, then we dont need to
-        // look further
-        if (!this.showHierarchy) {
-          return false;
-        }
-
-        // If we are showing a hierarchy, then we need to check its children
-        return this.isCheckboxSelectedByChildren(optionId);
-      },
-      /**
-       * Returns true if the given option should be selected thanks to its children.
-       * An option will be selected thanks to your children if:
-       * * One of the children is selected
-       * * It has several indeterminate children, but by joining all the contentNodes of the
-       *   child options, together they constitute the same array of selected contentNodes.
-       */
-      isCheckboxSelectedByChildren(optionId) {
-        const childrenOptions = Object.keys(this.selectedValues)
-          .filter(selectedValue => this.isSubLevel(selectedValue, optionId))
-          .map(selectedValue => this.selectedValues[selectedValue]);
-
-        if (childrenOptions.length === 0) {
-          return false; // No childen options
-        } else if (childrenOptions.length === 1) {
-          // just one child option, the value is deterrmined by if it is selected
-          return childrenOptions[0] === true;
-        }
-
-        // Here multiple children are selected or indeterminate
-        if (childrenOptions.some(value => value === true)) {
-          // if some child value is selected for all nodes, then the parent option is selected
-          return true;
-        }
-
-        // Here all children options are mixed, we need to check if together
-        // the parent option is common for all nodes
-        const nodeIds = new Set();
-        childrenOptions.forEach(valueNodeIds => {
-          valueNodeIds.forEach(nodeId => nodeIds.add(nodeId));
-        });
-        return nodeIds.size === this.nodeIds.length;
-      },
-      isCheckboxIndeterminate(optionId) {
-        if (this.selectedValues[optionId]) {
-          return this.selectedValues[optionId] !== true;
-        }
-        if (!this.showHierarchy) {
-          return false;
-        }
-
-        return (
-          Object.keys(this.selectedValues).some(selectedValue =>
-            this.isSubLevel(selectedValue, optionId)
-          ) && !this.isCheckboxSelected(optionId)
-        );
-      },
       validate() {
         if (this.validators && this.validators.length) {
           this.error = getInvalidText(
             this.validators,
-            Object.keys(this.selectedValues).filter(key => this.selectedValues[key] === true)
+            Object.keys(this.selectedValues).filter(
+              key => this.selectedValues[key].length === this.nodes.length
+            )
           );
         } else {
           this.error = '';
@@ -331,7 +151,7 @@
           this.nodes.map(node => {
             const fieldValue = {};
             Object.entries(this.selectedValues).forEach(([key, value]) => {
-              if (value === true || value.includes(node.id)) {
+              if (value.includes(node.id)) {
                 fieldValue[key] = true;
               }
             });
@@ -350,72 +170,6 @@
         this.$store.dispatch('showSnackbarSimple', this.confirmationMessage || '');
         this.close();
       },
-      setOption(optionId, value) {
-        if (value) {
-          this.selectedValues = {
-            ...this.selectedValues,
-            [optionId]: true,
-          };
-        } else {
-          const newSelectedValues = { ...this.selectedValues };
-
-          if (this.showHierarchy) {
-            // Remove all children values
-            Object.keys(this.selectedValues).forEach(selectedValue => {
-              if (this.isSubLevel(selectedValue, optionId)) {
-                delete newSelectedValues[selectedValue];
-              }
-            });
-          } else {
-            delete newSelectedValues[optionId];
-          }
-
-          this.selectedValues = newSelectedValues;
-        }
-        this.validate();
-      },
-      autocompleteInputUpdate(selected) {
-        const newSelectedValues = {};
-        selected.forEach(optionId => {
-          newSelectedValues[optionId] = true;
-        });
-        this.selectedValues = newSelectedValues;
-        this.validate();
-      },
-      treeItemStyle(optionId) {
-        if (this.flatList) {
-          return {};
-        }
-        const rule = this.$isRTL ? 'paddingRight' : 'paddingLeft';
-        const level = this.getLevel(optionId);
-        return { [rule]: `${level * 24}px` };
-      },
-      tooltipText(optionId) {
-        if (optionId === MIXED) {
-          return this.$tr('mixedLabel');
-        }
-        const option = this.options.find(option => option.value === optionId);
-        if (!option) {
-          return '';
-        }
-        if (!this.showHierarchy) {
-          return option.label || '';
-        }
-        let currentOption = optionId;
-        let text = option.label || '';
-        const level = this.getLevel(optionId);
-        for (let i = level - 1; i > 0; i--) {
-          const parentOption = this.options.find(
-            option =>
-              this.isSubLevel(currentOption, option.value) && this.getLevel(option.value) === i
-          );
-          if (parentOption) {
-            text = `${parentOption.label} - ${text}`;
-            currentOption = parentOption.value;
-          }
-        }
-        return text;
-      },
     },
     $trs: {
       saveAction: 'Save',
@@ -424,12 +178,10 @@
         '{count, number, integer} {count, plural, one {resource} other {resources}} selected',
       updateDescendantsCheckbox:
         'Apply to all resources and folders nested within the selected folders',
-      mixedLabel: 'Mixed',
-      emptyOptionsSearch: 'No options matches the search',
     },
   };
 
 </script>
 
 <style scoped>
-</style>
\ No newline at end of file
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
index 2dfa876768..2d2d474e1e 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditCategoriesModal.vue
@@ -1,68 +1,48 @@
 <template>
 
   <EditBooleanMapModal
-    showHierarchy
-    showAutocomplete
     field="categories"
     isDescendantsUpdatable
     :title="$tr('editCategories')"
     :nodeIds="nodeIds"
-    :options="categoriesOptions"
-    :autocompleteLabel="$tr('selectCategory')"
-    :emptyText="$tr('emptyCategoriesSearch')"
     :confirmationMessage="$tr('editedCategories', { count: nodeIds.length })"
-    :optionsListStyle="{
-      height: '250px',
-      overflowY: 'auto',
-    }"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <CategoryOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal.vue';
-  import { metadataTranslationMixin } from 'shared/mixins';
-  import { getSortedCategories } from 'shared/utils/helpers';
+  import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
 
   export default {
     name: 'EditCategoriesModal',
     components: {
+      CategoryOptions,
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
-    data() {
-      return {
-        categoriesOptions: [],
-      };
-    },
-    created() {
-      const categories = getSortedCategories();
-      this.categoriesOptions = Object.entries(categories).map(([id, category]) => ({
-        value: id,
-        label: this.translateMetadataString(camelCase(category)),
-      }));
-    },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editCategories: 'Edit Categories',
       editedCategories:
         'Edited categories for {count, number, integer} {count, plural, one {resource} other {resources}}',
-      selectCategory: 'Select / Type Category',
-      emptyCategoriesSearch: 'No categories matches the search',
     },
   };
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
index 4f8ae55f82..790de6c081 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLearningActivitiesModal.vue
@@ -5,29 +5,36 @@
     isDescendantsUpdatable
     :title="$tr('editLearningActivitiesTitle')"
     :nodeIds="nodeIds"
-    :options="learningActivitiesOptions"
     :validators="learningActivityValidators"
     :confirmationMessage="$tr('editedLearningActivities', { count: nodeIds.length })"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <LearningActivityOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { LearningActivities } from 'shared/constants';
-  import { metadataTranslationMixin } from 'shared/mixins';
   import { getLearningActivityValidators } from 'shared/utils/validation';
+  import LearningActivityOptions from 'shared/views/contentNodeFields/LearningActivityOptions';
 
   export default {
     name: 'EditLearningActivitiesModal',
     components: {
       EditBooleanMapModal,
+      LearningActivityOptions,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
@@ -35,21 +42,10 @@
       },
     },
     computed: {
-      learningActivitiesOptions() {
-        return Object.entries(LearningActivities).map(([key, value]) => ({
-          label: this.translateMetadataString(camelCase(key)),
-          value,
-        }));
-      },
       learningActivityValidators() {
         return getLearningActivityValidators();
       },
     },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editLearningActivitiesTitle: 'Edit Learning Activities',
       editedLearningActivities:
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
index 092b854a93..060465ef05 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditLevelsModal.vue
@@ -5,51 +5,40 @@
     isDescendantsUpdatable
     :title="$tr('editLevelsTitle')"
     :nodeIds="nodeIds"
-    :options="levelsOptions"
     :confirmationMessage="$tr('editedLevels', { count: nodeIds.length })"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <LevelsOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
 
 <script>
 
-  import camelCase from 'lodash/camelCase';
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { ContentLevels } from 'shared/constants';
-  import { metadataTranslationMixin } from 'shared/mixins';
+  import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
 
   export default {
     name: 'EditLevelsModal',
     components: {
+      LevelsOptions,
       EditBooleanMapModal,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
-    computed: {
-      levelsOptions() {
-        const replaceTranslationMap = {
-          PROFESSIONAL: 'specializedProfessionalTraining',
-          WORK_SKILLS: 'allLevelsWorkSkills',
-          BASIC_SKILLS: 'allLevelsBasicSkills',
-        };
-        return Object.entries(ContentLevels).map(([key, value]) => ({
-          label: this.translateMetadataString(replaceTranslationMap[key] || camelCase(key)),
-          value,
-        }));
-      },
-    },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editLevelsTitle: 'What Levels',
       editedLevels:
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
index c281e7a111..abc4fc4a62 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/EditResourcesNeededModal.vue
@@ -5,10 +5,19 @@
     isDescendantsUpdatable
     :title="$tr('editResourcesNeededTitle')"
     :nodeIds="nodeIds"
-    :options="resourcesOptions"
     :confirmationMessage="$tr('editedResourcesNeeded', { count: nodeIds.length })"
-    @close="close"
-  />
+    @close="() => $emit('close')"
+  >
+    <template #input="{ value, inputHandler }">
+      <ResourcesNeededOptions
+        expanded
+        hideLabel
+        :value="value"
+        :nodeIds="nodeIds"
+        @input="inputHandler"
+      />
+    </template>
+  </EditBooleanMapModal>
 
 </template>
 
@@ -16,34 +25,20 @@
 <script>
 
   import EditBooleanMapModal from './EditBooleanMapModal';
-  import { ResourcesNeededTypes, ResourcesNeededOptions } from 'shared/constants';
-  import { metadataTranslationMixin } from 'shared/mixins';
+  import ResourcesNeededOptions from 'shared/views/contentNodeFields/ResourcesNeededOptions';
 
   export default {
     name: 'EditResourcesNeededModal',
     components: {
       EditBooleanMapModal,
+      ResourcesNeededOptions,
     },
-    mixins: [metadataTranslationMixin],
     props: {
       nodeIds: {
         type: Array,
         required: true,
       },
     },
-    computed: {
-      resourcesOptions() {
-        return ResourcesNeededOptions.map(key => ({
-          label: this.translateMetadataString(key),
-          value: ResourcesNeededTypes[key],
-        }));
-      },
-    },
-    methods: {
-      close() {
-        this.$emit('close');
-      },
-    },
     $trs: {
       editResourcesNeededTitle: 'What will you need?',
       editedResourcesNeeded:
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
index aaeb12708b..576b6639bb 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/QuickEditModal/__tests__/EditBooleanMapModal.spec.js
@@ -1,8 +1,11 @@
 import Vuex from 'vuex';
 import { mount } from '@vue/test-utils';
+import camelCase from 'lodash/camelCase';
 import EditBooleanMapModal from '../EditBooleanMapModal';
-import { Categories } from 'shared/constants';
+import { metadataTranslationMixin } from 'shared/mixins';
 import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
+import { Categories } from 'shared/constants';
+import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
 
 let nodes;
 
@@ -16,9 +19,12 @@ const CheckboxValue = {
   INDETERMINATE: 'INDETERMINATE',
 };
 
+const { translateMetadataString } = metadataTranslationMixin.methods;
+
 const categoriesLookup = {};
 Object.entries(Categories).forEach(([key, value]) => {
-  categoriesLookup[key] = value;
+  const newKey = translateMetadataString(camelCase(key));
+  categoriesLookup[newKey] = value;
 });
 
 const getOptionsValues = wrapper => {
@@ -39,14 +45,6 @@ const getOptionsValues = wrapper => {
   return categories;
 };
 
-const getOptionsChips = wrapper => {
-  const chips = wrapper.findAll('[data-test="option-chip"]');
-  return chips.wrappers.map(chip => {
-    const [{ text } = {}] = chip.vm.$slots.default || [];
-    return categoriesLookup[text.trim()] || text.trim();
-  });
-};
-
 const findOptionCheckbox = (wrapper, category) => {
   const checkboxes = wrapper.findAll('[data-test="option-checkbox"]');
   return checkboxes.wrappers.find(checkbox => {
@@ -73,6 +71,18 @@ const makeWrapper = ({ nodeIds, field = 'categories', ...restOptions }) => {
       confirmationMessage: 'edited',
       ...restOptions,
     },
+    scopedSlots: {
+      input: function(props) {
+        return this.$createElement(CategoryOptions, {
+          props: {
+            ...props,
+            expanded: true,
+            hideLabel: true,
+            nodeIds,
+          },
+        });
+      },
+    },
   });
 };
 
@@ -151,27 +161,6 @@ describe('EditBooleanMapModal', () => {
         expect(foundationsValue).toBe(CheckboxValue.CHECKED);
       });
 
-      test('checkbox options should be selected depending on the options set for a single node - learner_needs', () => {
-        nodes['node1'].learner_needs = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], field: 'learner_needs' });
-
-        const optionsValues = getOptionsValues(wrapper);
-        const {
-          [Categories.DAILY_LIFE]: dailyLifeValue,
-          [Categories.FOUNDATIONS]: foundationsValue,
-          ...otheroptionsValues
-        } = optionsValues;
-        expect(
-          Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-        ).toBeTruthy();
-        expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-        expect(foundationsValue).toBe(CheckboxValue.CHECKED);
-      });
-
       test('checkbox option should be checked if all nodes have the same option set', () => {
         nodes['node1'].categories = {
           [Categories.DAILY_LIFE]: true,
@@ -212,233 +201,6 @@ describe('EditBooleanMapModal', () => {
         expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
         expect(foundationsValue).toBe(CheckboxValue.INDETERMINATE);
       });
-
-      describe('Showing hierarchy', () => {
-        test('just root categories should be selected depending on the categories set for a single node', () => {
-          nodes['node1'].categories = {
-            [Categories.DAILY_LIFE]: true, // root categories
-            [Categories.FOUNDATIONS]: true,
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.FOUNDATIONS]: foundationsValue,
-            ...otheroptionsValues
-          } = optionsValues;
-          expect(
-            Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-          ).toBeTruthy();
-          expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-          expect(foundationsValue).toBe(CheckboxValue.CHECKED);
-        });
-
-        test('parent categories should be selected depending on the categories set for a single node when showing hierarchy', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.DIVERSITY]: diversityValue,
-            ...otheroptionsValues
-          } = optionsValues;
-
-          expect(
-            Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-          ).toBeTruthy();
-          expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-          expect(diversityValue).toBe(CheckboxValue.CHECKED);
-        });
-
-        test('parent categories should not be selected when not showing hierarchy', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: false });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const { [Categories.DIVERSITY]: diversityValue, ...otheroptionsValues } = optionsValues;
-
-          expect(
-            Object.values(otheroptionsValues).every(value => value === CheckboxValue.UNCHECKED)
-          ).toBeTruthy();
-          expect(diversityValue).toBe(CheckboxValue.CHECKED);
-        });
-
-        test('parent checkbox category should be indeterminate if not all nodes have the same parent categories set', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.DIVERSITY]: diversityValue,
-          } = optionsValues;
-          expect(dailyLifeValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(diversityValue).toBe(CheckboxValue.INDETERMINATE);
-        });
-
-        test('multiple parent checkbox categories should be indeterminate if not all nodes have the same parent categories set', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-          nodes['node2'].categories = {
-            [Categories.GUIDES]: true, // For teachers -> Guides
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.FOR_TEACHERS]: forTeachersValue,
-          } = optionsValues;
-          expect(dailyLifeValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(forTeachersValue).toBe(CheckboxValue.INDETERMINATE);
-        });
-
-        test('parent checkbox category should be checked if all nodes have the same parent categories set', () => {
-          nodes['node1'].categories = {
-            [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-          };
-          nodes['node2'].categories = {
-            [Categories.CURRENT_EVENTS]: true, // Daily Life -> Current Events
-          };
-
-          const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showHierarchy: true });
-
-          const optionsValues = getOptionsValues(wrapper);
-          const {
-            [Categories.DAILY_LIFE]: dailyLifeValue,
-            [Categories.DIVERSITY]: diversityValue,
-            [Categories.CURRENT_EVENTS]: currentEventsValue,
-          } = optionsValues;
-          expect(diversityValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(currentEventsValue).toBe(CheckboxValue.INDETERMINATE);
-          expect(dailyLifeValue).toBe(CheckboxValue.CHECKED);
-        });
-      });
-    });
-
-    describe('Showing autocomplete', () => {
-      test('no chip should be displayed if nodes does not have options set', () => {
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(0);
-      });
-
-      test('should render selected options chips if showing autocomplete - categories', () => {
-        nodes['node1'].categories = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(2);
-        expect(categoriesChips).toContain(Categories.DAILY_LIFE);
-        expect(categoriesChips).toContain(Categories.FOUNDATIONS);
-      });
-
-      test('should render selected options chips  if showing autocomplete - learner_needs', () => {
-        nodes['node1'].learner_needs = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({
-          nodeIds: ['node1'],
-          field: 'learner_needs',
-          showAutocomplete: true,
-        });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(2);
-        expect(categoriesChips).toContain(Categories.DAILY_LIFE);
-        expect(categoriesChips).toContain(Categories.FOUNDATIONS);
-      });
-
-      test('should not render selected options chips if not showing autocomplete', () => {
-        nodes['node1'].categories = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: false });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(0);
-      });
-
-      test('should not render parent category chips even though showing hierarchy', () => {
-        nodes['node1'].categories = {
-          [Categories.DIVERSITY]: true, // Daily Life -> Diversity
-        };
-
-        const wrapper = makeWrapper({
-          nodeIds: ['node1'],
-          showAutocomplete: true,
-          showHierarchy: true,
-        });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(1);
-        expect(categoriesChips).toContain(Categories.DIVERSITY);
-      });
-
-      test('should render "Mixed" chip if there are mixed options set', () => {
-        nodes['node1'].categories = {
-          [Categories.DAILY_LIFE]: true,
-          [Categories.FOUNDATIONS]: true,
-        };
-
-        const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'], showAutocomplete: true });
-
-        const categoriesChips = getOptionsChips(wrapper);
-        expect(categoriesChips.length).toBe(1);
-        expect(categoriesChips).toContain('Mixed');
-      });
-
-      test('should filter options based on autocomplete search query', () => {
-        const searchQuery = 'drama';
-
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-        const animationFrameId = requestAnimationFrame(() => {
-          wrapper.find('[data-test="options-autocomplete"]').setValue(searchQuery);
-
-          const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-          categoriesOptions.wrappers.forEach(checkbox => {
-            const { label } = checkbox.vm.$props || {};
-            expect(label.toLowerCase()).toContain(searchQuery);
-          });
-          cancelAnimationFrame(animationFrameId);
-        });
-      });
-
-      test('should flatten options if autocomplete search query is not empty', () => {
-        const wrapper = makeWrapper({ nodeIds: ['node1'], showAutocomplete: true });
-        const animationFrameId = requestAnimationFrame(() => {
-          wrapper.find('[data-test="options-autocomplete"]').setValue('a');
-
-          const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-          categoriesOptions.wrappers.forEach(checkbox => {
-            expect(checkbox.element.style.paddingLeft).toBeFalsy();
-          });
-          cancelAnimationFrame(animationFrameId);
-        });
-      });
     });
   });
 
@@ -458,55 +220,6 @@ describe('EditBooleanMapModal', () => {
     expect(resourcesCounter.text()).toContain('4');
   });
 
-  test('should display hierarchy of options using more padding on each child level if showing hierarchy', () => {
-    const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: true });
-
-    const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-    let schoolPadding;
-    let socialSciencesPadding; // school -> social sciences
-    let anthropologyPadding; // school -> social sciences -> anthropology
-    categoriesOptions.wrappers.forEach(checkbox => {
-      const { label } = checkbox.vm.$props || {};
-      const padding = checkbox.element.style.paddingLeft;
-      const paddingNumber = parseInt(padding.replace('px', ''));
-      if (label === 'SCHOOL') {
-        schoolPadding = paddingNumber;
-      } else if (label === 'SOCIAL_SCIENCES') {
-        socialSciencesPadding = paddingNumber;
-      } else if (label === 'ANTHROPOLOGY') {
-        anthropologyPadding = paddingNumber;
-      }
-    });
-
-    expect(schoolPadding).toBeLessThan(socialSciencesPadding);
-    expect(socialSciencesPadding).toBeLessThan(anthropologyPadding);
-  });
-
-  test('should not display hierarchy of options if not showing hierarchy', () => {
-    const wrapper = makeWrapper({ nodeIds: ['node1'], showHierarchy: false });
-
-    const categoriesOptions = wrapper.findAll('[data-test="option-checkbox"]');
-    let schoolPadding;
-    let socialSciencesPadding; // school -> social sciences
-    let anthropologyPadding; // school -> social sciences -> anthropology
-    categoriesOptions.wrappers.forEach(checkbox => {
-      const { label } = checkbox.vm.$props || {};
-      const padding = checkbox.element.style.paddingLeft;
-      const paddingNumber = parseInt(padding.replace('px', ''));
-      if (label === 'school') {
-        schoolPadding = paddingNumber;
-      } else if (label === 'socialSciences') {
-        socialSciencesPadding = paddingNumber;
-      } else if (label === 'anthropology') {
-        anthropologyPadding = paddingNumber;
-      }
-    });
-
-    expect(schoolPadding).toBeFalsy();
-    expect(socialSciencesPadding).toBeFalsy();
-    expect(anthropologyPadding).toBeFalsy();
-  });
-
   describe('Submit', () => {
     test('should call updateContentNode with the right options on success submit - categories', () => {
       const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'] });
@@ -536,34 +249,6 @@ describe('EditBooleanMapModal', () => {
       });
     });
 
-    test('should call updateContentNode with the right options on success submit - learner_needs', () => {
-      const wrapper = makeWrapper({ nodeIds: ['node1', 'node2'] });
-
-      const schoolCheckbox = findOptionCheckbox(wrapper, Categories.SCHOOL);
-      schoolCheckbox.element.click();
-      const sociologyCheckbox = findOptionCheckbox(wrapper, Categories.SOCIOLOGY);
-      sociologyCheckbox.element.click();
-
-      const animationFrameId = requestAnimationFrame(() => {
-        wrapper.find('[data-test="edit-booleanMap-modal"]').vm.$emit('submit');
-        expect(contentNodeActions.updateContentNode).toHaveBeenCalledWith(expect.anything(), {
-          id: 'node1',
-          learner_needs: {
-            [Categories.SCHOOL]: true,
-            [Categories.SOCIOLOGY]: true,
-          },
-        });
-        expect(contentNodeActions.updateContentNode).toHaveBeenCalledWith(expect.anything(), {
-          id: 'node2',
-          learner_needs: {
-            [Categories.SCHOOL]: true,
-            [Categories.SOCIOLOGY]: true,
-          },
-        });
-        cancelAnimationFrame(animationFrameId);
-      });
-    });
-
     test('should emit close event on success submit', () => {
       const wrapper = makeWrapper({ nodeIds: ['node1'] });
 
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
deleted file mode 100644
index b14c11a839..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-
-  <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VAutocomplete
-        :value="selected"
-        :items="categoriesList"
-        :searchInput.sync="categoryText"
-        :label="translateMetadataString('category')"
-        box
-        clearable
-        chips
-        deletableChips
-        multiple
-        item-value="value"
-        item-text="text"
-        :menu-props="{ ...menuProps, zIndex: 4 }"
-        :attach="attach"
-        @click:clear="$nextTick(() => removeAll())"
-      >
-        <template #selection="data">
-          <VTooltip bottom lazy>
-            <template #activator="{ on, attrs }">
-              <VChip v-bind="attrs" close v-on="on" @input="remove(data.item.value)">
-                {{ data.item.text }}
-              </VChip>
-            </template>
-            <div>
-              <div>{{ tooltipHelper(data.item.value) }}</div>
-            </div>
-          </VTooltip>
-        </template>
-
-        <template #no-data>
-          <VListTile v-if="categoryText && categoryText.trim()">
-            <VListTileContent>
-              <VListTileTitle>
-                {{ $tr('noCategoryFoundText', { text: categoryText.trim() }) }}
-              </VListTileTitle>
-            </VListTileContent>
-          </VListTile>
-        </template>
-
-        <template #item="{ item }">
-          <VListTile
-            :value="isSelected(item.value)"
-            :class="{ parentOption: !item.value.includes('.') }"
-            @mousedown.prevent
-            @click="() => !isSelected(item.value) ? add(item.value) : remove(item.value)"
-          >
-            <KCheckbox
-              :checked="isSelected(item.value)"
-              :label="item.text"
-              :value="item.value"
-              style="margin-top: 10px"
-              :style="treeItemStyle(item)"
-              :ripple="false"
-            />
-          </VListTile>
-        </template>
-      </VAutocomplete>
-    </template>
-  </DropdownWrapper>
-
-</template>
-
-<script>
-
-  import camelCase from 'lodash/camelCase';
-  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
-  import { Categories, CategoriesLookup } from 'shared/constants';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
-
-  const availablePaths = {};
-  const categoriesObj = {};
-  const dropdown = [];
-
-  Object.assign(availablePaths, CategoriesLookup);
-
-  /*
-   * This is used to create the categories object from which the dropdown list is generated
-   * and is the same as this to make sure the order in Kolibri and Studio are the same:
-   * https://github.com/learningequality/kolibri/blob/develop/kolibri/plugins/learn/assets/
-   *   src/views/CategorySearchModal/CategorySearchOptions.vue#L73
-   */
-  for (const subjectKey of Object.entries(Categories)
-    .sort((a, b) => a[1].length - b[1].length)
-    .map(a => a[0])) {
-    const ids = Categories[subjectKey].split('.');
-
-    let path = '';
-    let nested = categoriesObj;
-    for (const fragment of ids) {
-      path += fragment;
-      if (availablePaths[path]) {
-        const nestedKey = CategoriesLookup[path];
-        if (!nested[nestedKey]) {
-          nested[nestedKey] = {
-            value: path,
-            nested: {},
-          };
-        }
-        nested = nested[nestedKey].nested;
-        path += '.';
-      } else {
-        break;
-      }
-    }
-  }
-
-  const flattenCategories = obj => {
-    Object.keys(obj).forEach(key => {
-      if (key !== 'value' && key !== 'nested') {
-        dropdown.push({
-          text: key,
-          value: obj[key]['value'],
-        });
-      }
-      if (typeof obj[key] === 'object') {
-        flattenCategories(obj[key]);
-      }
-    });
-    return dropdown;
-  };
-
-  flattenCategories(categoriesObj);
-
-  export default {
-    name: 'CategoryOptions',
-    components: { DropdownWrapper },
-    mixins: [constantsTranslationMixin, metadataTranslationMixin],
-    props: {
-      value: {
-        type: Array,
-        default: () => [],
-      },
-    },
-    data() {
-      return {
-        categoryText: null,
-      };
-    },
-    computed: {
-      categoriesList() {
-        return dropdown.map(category => {
-          return {
-            ...category,
-            text: this.translateMetadataString(camelCase(category.text)),
-            level: this.findDepth(Categories[category.text]),
-          };
-        });
-      },
-      selected: {
-        get() {
-          return this.value;
-        },
-        set(value) {
-          this.$emit('input', value);
-        },
-      },
-      nested() {
-        return !this.categoryText;
-      },
-      isSelected() {
-        return value => this.selected.some(v => v.startsWith(value));
-      },
-    },
-    methods: {
-      treeItemStyle(item) {
-        const rule = this.$isRTL ? 'paddingRight' : 'paddingLeft';
-        return this.nested ? { [rule]: `${item.level * 24}px` } : {};
-      },
-      add(value) {
-        this.selected = [...this.selected, value];
-      },
-      remove(value) {
-        this.selected = this.selected.filter(i => !i.startsWith(value));
-      },
-      removeAll() {
-        this.selected = [];
-      },
-      tooltipHelper(id) {
-        return this.displayFamilyTree(dropdown, id)
-          .map(node => this.translateMetadataString(camelCase(node.text)))
-          .join(' - ');
-      },
-      findDepth(val) {
-        return val.split('.').length - 1;
-      },
-      displayFamilyTree(nodes, id) {
-        return nodes.filter(node => this.findFamilyTreeIds(id).includes(node.value));
-      },
-      /**
-       * @param {String} id The id of the selected category
-       * @returns {Array} An array of all ids of the family beginning with the selected category
-       */
-      findFamilyTreeIds(id) {
-        const family = [];
-        let familyMember = id;
-        while (familyMember) {
-          family.push(familyMember);
-          familyMember = familyMember.includes('.')
-            ? familyMember.substring(0, familyMember.lastIndexOf('.'))
-            : null;
-        }
-        return family;
-      },
-    },
-    $trs: {
-      noCategoryFoundText: 'Category not found',
-    },
-  };
-
-</script>
-<style lang="less" scoped>
-
-  .parentOption:not(:first-child) {
-    border-top: 1px solid rgba(0, 0, 0, 0.12);
-  }
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
index 5586573aa5..30980840ea 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/components/edit/DetailsTabView.vue
@@ -65,6 +65,7 @@
                 ref="learning_activities"
                 v-model="contentLearningActivities"
                 :disabled="anyIsTopic"
+                :nodeIds="nodeIds"
                 @focus="trackClick('Learning activities')"
               />
               <!-- Level -->
@@ -72,6 +73,7 @@
                 v-if="oneSelected"
                 ref="contentLevel"
                 v-model="contentLevel"
+                :nodeIds="nodeIds"
                 @focus="trackClick('Levels dropdown')"
               />
               <!-- What you will need -->
@@ -79,6 +81,7 @@
                 v-if="oneSelected"
                 ref="resourcesNeeded"
                 v-model="resourcesNeeded"
+                :nodeIds="nodeIds"
                 @focus="trackClick('What you will need')"
               />
               <!-- Tags -->
@@ -111,7 +114,12 @@
             </VFlex>
           </VLayout>
           <!-- Category -->
-          <CategoryOptions v-if="oneSelected" ref="categories" v-model="categories" />
+          <CategoryOptions
+            v-if="oneSelected"
+            ref="categories"
+            v-model="categories"
+            :nodeIds="nodeIds"
+          />
         </VFlex>
       </VLayout>
 
@@ -376,11 +384,11 @@
   import SubtitlesList from '../../views/files/supplementaryLists/SubtitlesList';
   import { isImportedContent, isDisableSourceEdits, importedChannelLink } from '../../utils';
   import AccessibilityOptions from './AccessibilityOptions.vue';
-  import LevelsOptions from './LevelsOptions.vue';
-  import ResourcesNeededOptions from './ResourcesNeededOptions.vue';
-  import LearningActivityOptions from './LearningActivityOptions.vue';
-  import CategoryOptions from './CategoryOptions.vue';
+  import LevelsOptions from 'shared/views/contentNodeFields/LevelsOptions';
+  import CategoryOptions from 'shared/views/contentNodeFields/CategoryOptions';
   import CompletionOptions from 'shared/views/contentNodeFields/CompletionOptions';
+  import LearningActivityOptions from 'shared/views/contentNodeFields/LearningActivityOptions';
+  import ResourcesNeededOptions from 'shared/views/contentNodeFields/ResourcesNeededOptions';
   import {
     getTitleValidators,
     getCopyrightHolderValidators,
@@ -434,14 +442,10 @@
   }
 
   /**
-   * This function is used to generate getter/setters for new metadata fields that are boolean maps:
-   * - `grade_levels` (sometimes referred to as `content_levels`)
-   * - `learner_needs` (resources needed)
+   * This function is used to generate getter/setters having its value as
+   * an array for metadata fields that are boolean maps:
    * - `accessibility_labels` (accessibility options)
-   * - `learning_activities` (learning activities)
-   * - `categories` (categories)
    */
-
   function generateNestedNodesGetterSetter(key) {
     return {
       get() {
@@ -475,6 +479,42 @@
     };
   }
 
+  /**
+   * This function is used to generate getter/setters having its value as
+   * an object for metadata fields that are boolean maps:
+   * - `grade_levels` (sometimes referred to as `content_levels`)
+   * - `learner_needs` (resources needed)
+   * - `learning_activities` (learning activities)
+   * - `categories` (categories)
+   */
+  function generateNestedNodesGetterSetterObject(key) {
+    return {
+      get() {
+        const value = {};
+        for (const node of this.nodes) {
+          const diffTrackerNode = this.diffTracker[node.id] || {};
+          const currentValue = diffTrackerNode[key] || node[key] || {};
+          Object.entries(currentValue).forEach(([option, optionValue]) => {
+            if (optionValue) {
+              value[option] = value[option] || [];
+              value[option].push(node.id);
+            }
+          });
+        }
+        return value;
+      },
+      set(value) {
+        const newMap = {};
+        for (const option in value) {
+          if (value[option].length === this.nodes.length) {
+            newMap[option] = true;
+          }
+        }
+        this.update({ [key]: newMap });
+      },
+    };
+  }
+
   export default {
     name: 'DetailsTabView',
     components: {
@@ -584,24 +624,28 @@
       role: generateGetterSetter('role_visibility'),
       language: generateGetterSetter('language'),
       accessibility: generateNestedNodesGetterSetter('accessibility_labels'),
-      contentLevel: generateNestedNodesGetterSetter('grade_levels'),
-      resourcesNeeded: generateNestedNodesGetterSetter('learner_needs'),
+      contentLevel: generateNestedNodesGetterSetterObject('grade_levels'),
+      resourcesNeeded: generateNestedNodesGetterSetterObject('learner_needs'),
       forBeginners: {
         get() {
-          return this.resourcesNeeded.includes(ResourcesNeededTypes.FOR_BEGINNERS);
+          const value = this.resourcesNeeded[ResourcesNeededTypes.FOR_BEGINNERS];
+          return value && value.length === this.nodes.length;
         },
         set(value) {
           if (value) {
-            this.resourcesNeeded = [...this.resourcesNeeded, ResourcesNeededTypes.FOR_BEGINNERS];
+            this.resourcesNeeded = {
+              ...this.resourcesNeeded,
+              [ResourcesNeededTypes.FOR_BEGINNERS]: this.nodeIds,
+            };
           } else {
-            this.resourcesNeeded = this.resourcesNeeded.filter(
-              r => r !== ResourcesNeededTypes.FOR_BEGINNERS
-            );
+            const newMap = { ...this.resourcesNeeded };
+            delete newMap[ResourcesNeededTypes.FOR_BEGINNERS];
+            this.resourcesNeeded = newMap;
           }
         },
       },
-      contentLearningActivities: generateNestedNodesGetterSetter('learning_activities'),
-      categories: generateNestedNodesGetterSetter('categories'),
+      contentLearningActivities: generateNestedNodesGetterSetterObject('learning_activities'),
+      categories: generateNestedNodesGetterSetterObject('categories'),
       license() {
         return this.getValueFromNodes('license');
       },
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue
deleted file mode 100644
index e10ddb3913..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-
-  <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VSelect
-        ref="need"
-        v-model="need"
-        :items="resources"
-        box
-        chips
-        :label="$tr('resourcesNeededLabel')"
-        multiple
-        deletableChips
-        clearable
-        :menu-props="menuProps"
-        :attach="attach"
-        :hint="hint"
-        persistent-hint
-      />
-    </template>
-  </DropdownWrapper>
-
-</template>
-
-<script>
-
-  import { ResourcesNeededTypes, ResourcesNeededOptions } from 'shared/constants';
-  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
-
-  export default {
-    name: 'ResourcesNeededOptions',
-    components: { DropdownWrapper },
-    mixins: [constantsTranslationMixin, metadataTranslationMixin],
-    props: {
-      value: {
-        type: Array,
-        default: () => [],
-      },
-    },
-    computed: {
-      need: {
-        get() {
-          return this.value;
-        },
-        set(value) {
-          this.$emit('input', value);
-        },
-      },
-      resources() {
-        return ResourcesNeededOptions.map(key => ({
-          text: this.translateMetadataString(key),
-          value: ResourcesNeededTypes[key],
-        }));
-      },
-      hint() {
-        return this.value && this.value.includes(ResourcesNeededTypes.OTHER_SUPPLIES)
-          ? this.$tr('furtherExplanation')
-          : '';
-      },
-    },
-    $trs: {
-      resourcesNeededLabel: 'Requirements',
-      furtherExplanation:
-        "Please add to the 'Description' field any additional supplies learners will need in order to use this resource",
-    },
-  };
-
-</script>
-<style lang="less">
-
-</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
deleted file mode 100644
index c8a82a30e8..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/categoryOptions.spec.js
+++ /dev/null
@@ -1,331 +0,0 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify';
-import { shallowMount } from '@vue/test-utils';
-import CategoryOptions from '../CategoryOptions.vue';
-
-Vue.use(Vuetify);
-
-const testDropdown = [
-  {
-    text: 'DAILY_LIFE',
-    value: 'PbGoe2MV',
-  },
-  {
-    text: 'CURRENT_EVENTS',
-    value: 'PbGoe2MV.J7CU1IxN',
-  },
-  {
-    text: 'DIVERSITY',
-    value: 'PbGoe2MV.EHcbjuKq',
-  },
-  {
-    text: 'ENTREPRENEURSHIP',
-    value: 'PbGoe2MV.kyxTNsRS',
-  },
-  {
-    text: 'ENVIRONMENT',
-    value: 'PbGoe2MV.tS7WKnZ7',
-  },
-  {
-    text: 'FINANCIAL_LITERACY',
-    value: 'PbGoe2MV.HGIc9sZq',
-  },
-  {
-    text: 'MEDIA_LITERACY',
-    value: 'PbGoe2MV.UOTL#KIV',
-  },
-  {
-    text: 'MENTAL_HEALTH',
-    value: 'PbGoe2MV.d8&gCo2N',
-  },
-  {
-    text: 'PUBLIC_HEALTH',
-    value: 'PbGoe2MV.kivAZaeX',
-  },
-  {
-    text: 'FOR_TEACHERS',
-    value: 'ziJ6PCuU',
-  },
-  {
-    text: 'GUIDES',
-    value: 'ziJ6PCuU.RLfhp37t',
-  },
-  {
-    text: 'LESSON_PLANS',
-    value: 'ziJ6PCuU.lOBPr5ix',
-  },
-  {
-    text: 'FOUNDATIONS',
-    value: 'BCG3&slG',
-  },
-  {
-    text: 'DIGITAL_LITERACY',
-    value: 'BCG3&slG.wZ3EAedB',
-  },
-  {
-    text: 'FOUNDATIONS_LOGIC_AND_CRITICAL_THINKING',
-    value: 'BCG3&slG.0&d0qTqS',
-  },
-  {
-    text: 'LEARNING_SKILLS',
-    value: 'BCG3&slG.fP2j70bj',
-  },
-  {
-    text: 'LITERACY',
-    value: 'BCG3&slG.HLo9TbNq',
-  },
-  {
-    text: 'NUMERACY',
-    value: 'BCG3&slG.Tsyej9ta',
-  },
-  {
-    text: 'SCHOOL',
-    value: 'd&WXdXWF',
-  },
-  {
-    text: 'ARTS',
-    value: 'd&WXdXWF.5QAjgfv7',
-  },
-  {
-    text: 'DANCE',
-    value: 'd&WXdXWF.5QAjgfv7.BUMJJBnS',
-  },
-  {
-    text: 'DRAMA',
-    value: 'd&WXdXWF.5QAjgfv7.XsWznP4o',
-  },
-  {
-    text: 'MUSIC',
-    value: 'd&WXdXWF.5QAjgfv7.u0aKjT4i',
-  },
-  {
-    text: 'VISUAL_ART',
-    value: 'd&WXdXWF.5QAjgfv7.4LskOFXj',
-  },
-  {
-    text: 'COMPUTER_SCIENCE',
-    value: 'd&WXdXWF.e#RTW9E#',
-  },
-  {
-    text: 'MECHANICAL_ENGINEERING',
-    value: 'd&WXdXWF.e#RTW9E#.8ZoaPsVW',
-  },
-  {
-    text: 'PROGRAMMING',
-    value: 'd&WXdXWF.e#RTW9E#.CfnlTDZ#',
-  },
-  {
-    text: 'WEB_DESIGN',
-    value: 'd&WXdXWF.e#RTW9E#.P7s8FxQ8',
-  },
-  {
-    text: 'HISTORY',
-    value: 'd&WXdXWF.zWtcJ&F2',
-  },
-  {
-    text: 'LANGUAGE_LEARNING',
-    value: 'd&WXdXWF.JDUfJNXc',
-  },
-  {
-    text: 'MATHEMATICS',
-    value: 'd&WXdXWF.qs0Xlaxq',
-  },
-  {
-    text: 'ALGEBRA',
-    value: 'd&WXdXWF.qs0Xlaxq.0t5msbL5',
-  },
-  {
-    text: 'ARITHMETIC',
-    value: 'd&WXdXWF.qs0Xlaxq.nG96nHDc',
-  },
-  {
-    text: 'CALCULUS',
-    value: 'd&WXdXWF.qs0Xlaxq.8rJ57ht6',
-  },
-  {
-    text: 'GEOMETRY',
-    value: 'd&WXdXWF.qs0Xlaxq.lb7ELcK5',
-  },
-  {
-    text: 'STATISTICS',
-    value: 'd&WXdXWF.qs0Xlaxq.jNm15RLB',
-  },
-  {
-    text: 'READING_AND_WRITING',
-    value: 'd&WXdXWF.kHKJ&PbV',
-  },
-  {
-    text: 'LITERATURE',
-    value: 'd&WXdXWF.kHKJ&PbV.DJLBbaEk',
-  },
-  {
-    text: 'LOGIC_AND_CRITICAL_THINKING',
-    value: 'd&WXdXWF.kHKJ&PbV.YMBXStib',
-  },
-  {
-    text: 'READING_COMPREHENSION',
-    value: 'd&WXdXWF.kHKJ&PbV.r7RxB#9t',
-  },
-  {
-    text: 'WRITING',
-    value: 'd&WXdXWF.kHKJ&PbV.KFJOCr&6',
-  },
-  {
-    text: 'SCIENCES',
-    value: 'd&WXdXWF.i1IdaNwr',
-  },
-  {
-    text: 'ASTRONOMY',
-    value: 'd&WXdXWF.i1IdaNwr.mjSF4QlF',
-  },
-  {
-    text: 'BIOLOGY',
-    value: 'd&WXdXWF.i1IdaNwr.uErN4PdS',
-  },
-  {
-    text: 'CHEMISTRY',
-    value: 'd&WXdXWF.i1IdaNwr.#r5ocgid',
-  },
-  {
-    text: 'EARTH_SCIENCE',
-    value: 'd&WXdXWF.i1IdaNwr.zbDzxDE7',
-  },
-  {
-    text: 'PHYSICS',
-    value: 'd&WXdXWF.i1IdaNwr.r#wbt#jF',
-  },
-  {
-    text: 'SOCIAL_SCIENCES',
-    value: 'd&WXdXWF.K80UMYnW',
-  },
-  {
-    text: 'ANTHROPOLOGY',
-    value: 'd&WXdXWF.K80UMYnW.ViBlbQR&',
-  },
-  {
-    text: 'CIVIC_EDUCATION',
-    value: 'd&WXdXWF.K80UMYnW.F863vKiF',
-  },
-  {
-    text: 'POLITICAL_SCIENCE',
-    value: 'd&WXdXWF.K80UMYnW.K72&pITr',
-  },
-  {
-    text: 'SOCIOLOGY',
-    value: 'd&WXdXWF.K80UMYnW.75WBu1ZS',
-  },
-  {
-    text: 'WORK',
-    value: 'l7DsPDlm',
-  },
-  {
-    text: 'PROFESSIONAL_SKILLS',
-    value: 'l7DsPDlm.#N2VymZo',
-  },
-  {
-    text: 'TECHNICAL_AND_VOCATIONAL_TRAINING',
-    value: 'l7DsPDlm.ISEXeZt&',
-  },
-  {
-    text: 'INDUSTRY_AND_SECTOR_SPECIFIC',
-    value: 'l7DsPDlm.ISEXeZt&.pRvOzJTE',
-  },
-  {
-    text: 'SKILLS_TRAINING',
-    value: 'l7DsPDlm.ISEXeZt&.&1WpYE&n',
-  },
-  {
-    text: 'TOOLS_AND_SOFTWARE_TRAINING',
-    value: 'l7DsPDlm.ISEXeZt&.1JfIbP&N',
-  },
-];
-
-describe('CategoryOptions', () => {
-  it('smoke test', () => {
-    const wrapper = shallowMount(CategoryOptions);
-    expect(wrapper.isVueInstance()).toBe(true);
-  });
-  it('emits expected data', () => {
-    const wrapper = shallowMount(CategoryOptions);
-    const value = 'string';
-    wrapper.vm.$emit('input', value);
-
-    expect(wrapper.emitted().input).toBeTruthy();
-    expect(wrapper.emitted().input.length).toBe(1);
-    expect(wrapper.emitted().input[0]).toEqual([value]);
-  });
-  const expectedFamilyTree = [
-    { text: 'SCHOOL', value: 'd&WXdXWF' },
-    { text: 'ARTS', value: 'd&WXdXWF.5QAjgfv7' },
-    { text: 'DANCE', value: 'd&WXdXWF.5QAjgfv7.BUMJJBnS' },
-  ];
-
-  describe('display', () => {
-    it('has a tooltip that displays the tree for value of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
-      const expectedToolTip = 'School - Arts - Dance';
-
-      expect(wrapper.vm.tooltipHelper(item)).toEqual(expectedToolTip);
-    });
-    it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const dropdown = wrapper.vm.categoriesList;
-      const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
-
-      expect(everyCategoryHasLevelsKey).toBeTruthy();
-    });
-  });
-
-  describe('nested family structure', () => {
-    it('can display all the ids of family tree of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; //'Dance'
-      const expectedFamilyTreeIds = expectedFamilyTree.map(item => item.value);
-
-      expect(wrapper.vm.findFamilyTreeIds(item).sort()).toEqual(expectedFamilyTreeIds.sort());
-    });
-    it('can display array of objects of family tree of an item', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; //'Dance'
-
-      expect(wrapper.vm.displayFamilyTree(testDropdown, item)).toEqual(expectedFamilyTree);
-    });
-  });
-
-  describe('interactions', () => {
-    it('when user checks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'abcd';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.add(item);
-
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([item]);
-    });
-    it('when user unchecks an item, that is emitted to the parent component', () => {
-      const wrapper = shallowMount(CategoryOptions);
-      const item = 'defj';
-      wrapper.vm.$emit = jest.fn();
-      wrapper.vm.remove(item);
-
-      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
-      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual([]);
-    });
-  });
-
-  describe('close button on chip interactions', () => {
-    it('in the autocomplete bar, the chip is removed when user clicks on its close button', () => {
-      const wrapper = shallowMount(CategoryOptions, {
-        data() {
-          return { selected: ['remove me', 'abc', 'def', 'abc.'] };
-        },
-      });
-      const originalChipsLength = wrapper.vm.selected.length;
-      wrapper.vm.remove('remove me');
-      const chips = wrapper.vm.selected;
-
-      expect(chips.length).toEqual(originalChipsLength - 1);
-    });
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/resourcesNeededOptions.spec.js b/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/resourcesNeededOptions.spec.js
deleted file mode 100644
index 0fc09b1598..0000000000
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/resourcesNeededOptions.spec.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import Vue from 'vue';
-import Vuetify from 'vuetify';
-import { shallowMount, mount } from '@vue/test-utils';
-import ResourcesNeededOptions from '../ResourcesNeededOptions.vue';
-
-Vue.use(Vuetify);
-
-function makeWrapper(value) {
-  return mount(ResourcesNeededOptions, {
-    propsData: {
-      value,
-    },
-  });
-}
-
-describe('ResourcesNeededOptions', () => {
-  it('smoke test', () => {
-    const wrapper = shallowMount(ResourcesNeededOptions);
-
-    expect(wrapper.isVueInstance()).toBe(true);
-  });
-
-  describe('updating state', () => {
-    it('should update resources field with new values received from a parent', () => {
-      const resourcesNeeded = ['person', 'book'];
-      const wrapper = makeWrapper(resourcesNeeded);
-      const dropdown = wrapper.find({ name: 'v-select' });
-
-      expect(dropdown.props('value')).toEqual(resourcesNeeded);
-
-      wrapper.setProps({
-        value: ['cat'],
-      });
-      expect(dropdown.props('value')).toEqual(['cat']);
-    });
-
-    it('should emit new input values', () => {
-      const resourcesNeeded = ['person', 'book', 'train'];
-      const wrapper = makeWrapper([]);
-      const dropdown = wrapper.find({ name: 'v-select' });
-      dropdown.vm.$emit('input', resourcesNeeded);
-
-      return Vue.nextTick().then(() => {
-        const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(resourcesNeeded);
-      });
-    });
-  });
-});
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
new file mode 100644
index 0000000000..032a720873
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/CategoryOptions.vue
@@ -0,0 +1,320 @@
+<template>
+
+  <div>
+    <DropdownWrapper>
+      <template #default="{ attach, menuProps }">
+        <VAutocomplete
+          :value="autocompleteValues"
+          :items="autocompleteOptions"
+          :searchInput.sync="categoryText"
+          :label="translateMetadataString('category')"
+          box
+          clearable
+          chips
+          deletableChips
+          multiple
+          item-value="value"
+          item-text="text"
+          :menu-props="{
+            ...menuProps,
+            zIndex: 4,
+            height: expanded ? 0 : 'auto',
+            maxHeight: expanded ? 0 : 300,
+          }"
+          :attach="attach"
+          @click:clear="$nextTick(() => removeAll())"
+        >
+          <template #selection="data">
+            <VTooltip bottom lazy>
+              <template #activator="{ on, attrs }">
+                <VChip
+                  v-bind="attrs"
+                  :close="!data.item.undeletable"
+                  v-on="on"
+                  @input="remove(data.item.value)"
+                >
+                  {{ data.item.text }}
+                </VChip>
+              </template>
+              <div>
+                <div>{{ tooltipText(data.item.value) }}</div>
+              </div>
+            </VTooltip>
+          </template>
+
+          <template #no-data>
+            <VListTile v-if="categoryText && categoryText.trim()">
+              <VListTileContent>
+                <VListTileTitle>
+                  {{ $tr('noCategoryFoundText', { text: categoryText.trim() }) }}
+                </VListTileTitle>
+              </VListTileContent>
+            </VListTile>
+          </template>
+
+          <template #item="{ item }">
+            <VListTile
+              :value="isSelected(item.value)"
+              :class="{ parentOption: !item.value.includes('.') }"
+              @mousedown.prevent
+              @click="onChange(item.value)"
+            >
+              <KCheckbox
+                :checked="isSelected(item.value)"
+                :label="item.text"
+                :value="item.value"
+                style="margin-top: 10px"
+                :style="treeItemStyle(item)"
+                :ripple="false"
+              />
+            </VListTile>
+          </template>
+        </VAutocomplete>
+      </template>
+    </DropdownWrapper>
+
+    <div v-if="expanded" class="checkbox-list-wrapper">
+      <KCheckbox
+        v-for="option in filteredCategories"
+        :key="option.value"
+        data-test="option-checkbox"
+        :label="option.text"
+        :style="treeItemStyle(option)"
+        :checked="isSelected(option.value)"
+        :indeterminate="isCheckboxIndeterminate(option.value)"
+        @change="onChange(option.value)"
+      />
+      <p
+        v-if="!filteredCategories.length"
+        :style="{ color: $themeTokens.annotation }"
+      >
+        {{ $tr('noCategoryFoundText') }}
+      </p>
+    </div>
+  </div>
+
+</template>
+
+<script>
+
+  import camelCase from 'lodash/camelCase';
+  import { getSortedCategories } from 'shared/utils/helpers';
+  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
+  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
+
+  const MIXED = 'mixed';
+
+  export default {
+    name: 'CategoryOptions',
+    components: { DropdownWrapper },
+    mixins: [constantsTranslationMixin, metadataTranslationMixin],
+    props: {
+      /**
+       * This prop receives an object with the following structure:
+       * {
+       *  [categoryId]: [nodeId1, nodeId2, ...]
+       * }
+       * Where nodeId is the id of the node that has the category selected
+       */
+      value: {
+        type: Object,
+        required: true,
+      },
+      /**
+       * An array of nodeIds that we are editing. If none, we will asume that we
+       * are editing just one node
+       */
+      nodeIds: {
+        type: Array,
+        default: () => [],
+      },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        categoryText: null,
+      };
+    },
+    computed: {
+      categoriesList() {
+        const categories = getSortedCategories();
+        return Object.entries(categories).map(([id, category]) => ({
+          value: id,
+          text: this.translateMetadataString(camelCase(category)),
+          level: this.findDepth(id),
+        }));
+      },
+      selected: {
+        get() {
+          return this.value;
+        },
+        set(value) {
+          this.$emit('input', value);
+        },
+      },
+      autocompleteOptions() {
+        const options = [...this.categoriesList];
+        if (this.expanded) {
+          // Just boolean maps can have indeterminate values
+          options.push({
+            value: MIXED,
+            text: this.$tr('mixedLabel'),
+            undeletable: true,
+          });
+        }
+        return options;
+      },
+      autocompleteValues() {
+        const selectedValues = Object.entries(this.selected)
+          .filter(entry => entry[1].length === this.nodeIds.length)
+          .map(([key]) => key);
+        if (
+          this.expanded &&
+          Object.values(this.selected).some(value => value.length < this.nodeIds.length)
+        ) {
+          selectedValues.push(MIXED);
+        }
+        return selectedValues;
+      },
+      nested() {
+        return !this.categoryText;
+      },
+      filteredCategories() {
+        const searchQuery = this.categoryText?.trim().toLowerCase();
+        if (!searchQuery) {
+          return this.categoriesList;
+        }
+        return this.categoriesList.filter(option =>
+          option.text.toLowerCase().includes(searchQuery)
+        );
+      },
+    },
+    methods: {
+      treeItemStyle(item) {
+        const rule = this.$isRTL ? 'paddingRight' : 'paddingLeft';
+        return this.nested ? { [rule]: `${item.level * 24}px` } : {};
+      },
+      add(value) {
+        this.selected = {
+          ...this.selected,
+          [value]: this.nodeIds,
+        };
+      },
+      remove(value) {
+        const newSelected = { ...this.selected };
+        Object.keys(this.selected)
+          .filter(selectedValue => selectedValue.startsWith(value))
+          .forEach(selectedValue => {
+            delete newSelected[selectedValue];
+          });
+        this.selected = newSelected;
+      },
+      removeAll() {
+        this.selected = {};
+      },
+      tooltipText(optionId) {
+        if (optionId === MIXED) {
+          return this.$tr('mixedLabel');
+        }
+        const option = this.categoriesList.find(option => option.value === optionId);
+        if (!option) {
+          return '';
+        }
+        let currentOption = optionId;
+        let text = option.text || '';
+        const level = option.level;
+        for (let i = level - 1; i >= 0; i--) {
+          const parentOption = this.categoriesList.find(
+            option => currentOption.startsWith(option.value) && option.level === i
+          );
+          if (parentOption) {
+            text = `${parentOption.text} - ${text}`;
+            currentOption = parentOption.value;
+          }
+        }
+        return text;
+      },
+      findDepth(val) {
+        return val.split('.').length - 1;
+      },
+      isSelected(value) {
+        // If the value is truthy (true or an array of nodeIds) then
+        // it is selected just if it is true (not an array)
+        if (this.selected[value] && this.selected[value].length === this.nodeIds.length) {
+          return true;
+        }
+
+        return this.isCheckboxSelectedByChildren(value);
+      },
+      /**
+       * Returns true if the given option should be selected thanks to its children.
+       * An option will be selected thanks to its children if:
+       * * One of the children is selected
+       * * It has several indeterminate children, but by joining all the contentNodes of the
+       *   child options, together they constitute the same array of selected contentNodes.
+       */
+      isCheckboxSelectedByChildren(optionId) {
+        const childrenOptions = Object.keys(this.selected)
+          .filter(selectedValue => selectedValue.startsWith(optionId))
+          .map(selectedValue => this.selected[selectedValue]);
+
+        if (childrenOptions.length === 0) {
+          return false; // No childen options
+        } else if (childrenOptions.length === 1) {
+          // just one child option, the value is deterrmined by if it is selected
+          return childrenOptions[0].length === this.nodeIds.length;
+        }
+
+        // Here multiple children are selected or indeterminate
+        if (childrenOptions.some(value => value.length === this.nodeIds.length)) {
+          // if some child value is selected for all nodes, then the parent option is selected
+          return true;
+        }
+
+        // Here all children options are mixed, we need to check if together
+        // the parent option is common for all nodes
+        const nodeIds = new Set();
+        childrenOptions.forEach(valueNodeIds => {
+          valueNodeIds.forEach(nodeId => nodeIds.add(nodeId));
+        });
+        return nodeIds.size === this.nodeIds.length;
+      },
+      isCheckboxIndeterminate(optionId) {
+        if (this.selected[optionId] && this.selected[optionId].length < this.nodeIds.length) {
+          return true;
+        }
+        return (
+          Object.keys(this.selected).some(selectedValue => selectedValue.startsWith(optionId)) &&
+          !this.isSelected(optionId)
+        );
+      },
+      onChange(optionId) {
+        if (this.isSelected(optionId)) {
+          this.remove(optionId);
+        } else {
+          this.add(optionId);
+        }
+      },
+    },
+    $trs: {
+      noCategoryFoundText: 'Category not found',
+      mixedLabel: 'Mixed',
+    },
+  };
+
+</script>
+<style lang="less" scoped>
+
+  .parentOption:not(:first-child) {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
+
+  .checkbox-list-wrapper {
+    height: 250px;
+    overflow-y: auto;
+  }
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
similarity index 57%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
index 3ffd37968c..ce1f49b8b8 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LearningActivityOptions.vue
@@ -1,23 +1,16 @@
 <template>
 
-  <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VSelect
-        v-model="learningActivity"
-        :items="learningActivities"
-        :disabled="disabled"
-        box
-        chips
-        clearable
-        :label="translateMetadataString('learningActivity')"
-        multiple
-        deletableChips
-        :menu-props="menuProps"
-        :rules="learningActivityRules"
-        :attach="attach"
-      />
-    </template>
-  </DropdownWrapper>
+  <ExpandableSelect
+    v-model="learningActivity"
+    multiple
+    :disabled="disabled"
+    :expanded="expanded"
+    :options="learningActivities"
+    :hideLabel="hideLabel"
+    :rules="learningActivityRules"
+    :label="translateMetadataString('learningActivity')"
+    :availableItems="nodeIds"
+  />
 
 </template>
 
@@ -25,23 +18,42 @@
 
   import camelCase from 'lodash/camelCase';
   import { LearningActivities } from 'shared/constants';
+  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
   import { getLearningActivityValidators, translateValidator } from 'shared/utils/validation';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   export default {
     name: 'LearningActivityOptions',
-    components: { DropdownWrapper },
+    components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
+      /**
+       * This prop receives an object with the following structure:
+       * {
+       *  [learningActivityId]: [nodeId1, nodeId2, ...]
+       * }
+       * Where nodeId is the id of the node that has the learning activity selected
+       */
       value: {
-        type: Array,
-        default: () => [],
+        type: Object,
+        required: true,
       },
       disabled: {
         type: Boolean,
         default: false,
       },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
+      hideLabel: {
+        type: Boolean,
+        default: false,
+      },
+      nodeIds: {
+        type: Array,
+        required: true,
+      },
     },
     computed: {
       learningActivity: {
@@ -49,7 +61,7 @@
           if (!this.disabled) {
             return this.value;
           }
-          return null;
+          return {};
         },
         set(value) {
           if (!this.disabled) {
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
similarity index 65%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
index 9dea958af7..e300b281a0 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/LevelsOptions.vue
@@ -1,22 +1,14 @@
 <template>
 
-  <DropdownWrapper>
-    <template #default="{ attach, menuProps }">
-      <VSelect
-        ref="level"
-        v-model="level"
-        :items="levels"
-        box
-        chips
-        clearable
-        :label="translateMetadataString('level')"
-        multiple
-        deletableChips
-        :menu-props="menuProps"
-        :attach="attach"
-      />
-    </template>
-  </DropdownWrapper>
+  <ExpandableSelect
+    v-model="level"
+    multiple
+    :expanded="expanded"
+    :options="levels"
+    :hideLabel="hideLabel"
+    :label="translateMetadataString('level')"
+    :availableItems="nodeIds"
+  />
 
 </template>
 
@@ -24,17 +16,36 @@
 
   import camelCase from 'lodash/camelCase';
   import { ContentLevels } from 'shared/constants';
+  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
   import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
-  import DropdownWrapper from 'shared/views/form/DropdownWrapper';
 
   export default {
     name: 'LevelsOptions',
-    components: { DropdownWrapper },
+    components: { ExpandableSelect },
     mixins: [constantsTranslationMixin, metadataTranslationMixin],
     props: {
+      /**
+       * This prop receives an object with the following structure:
+       * {
+       *  [levelId]: [nodeId1, nodeId2, ...]
+       * }
+       * Where nodeId is the id of the node that has the level selected
+       */
       value: {
+        type: Object,
+        required: true,
+      },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
+      hideLabel: {
+        type: Boolean,
+        default: false,
+      },
+      nodeIds: {
         type: Array,
-        default: () => [],
+        required: true,
       },
     },
     computed: {
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
new file mode 100644
index 0000000000..8585ed7911
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/ResourcesNeededOptions.vue
@@ -0,0 +1,86 @@
+<template>
+
+  <ExpandableSelect
+    v-model="need"
+    multiple
+    :expanded="expanded"
+    :options="resources"
+    :hideLabel="hideLabel"
+    :label="$tr('resourcesNeededLabel')"
+    :hint="hint"
+    :availableItems="nodeIds"
+  />
+
+</template>
+
+<script>
+
+  import ExpandableSelect from 'shared/views/form/ExpandableSelect';
+  import { ResourcesNeededTypes, ResourcesNeededOptions } from 'shared/constants';
+  import { constantsTranslationMixin, metadataTranslationMixin } from 'shared/mixins';
+
+  export default {
+    name: 'ResourcesNeededOptions',
+    components: { ExpandableSelect },
+    mixins: [constantsTranslationMixin, metadataTranslationMixin],
+    props: {
+      /**
+       * This prop receives an object with the following structure:
+       * {
+       *  [resourceId]: [nodeId1, nodeId2, ...]
+       * }
+       * Where nodeId is the id of the node that has the resource selected
+       */
+      value: {
+        type: Object,
+        required: true,
+      },
+      expanded: {
+        type: Boolean,
+        default: false,
+      },
+      hideLabel: {
+        type: Boolean,
+        default: false,
+      },
+      nodeIds: {
+        type: Array,
+        required: true,
+      },
+    },
+    computed: {
+      need: {
+        get() {
+          return this.value;
+        },
+        set(value) {
+          this.$emit('input', value);
+        },
+      },
+      resources() {
+        return ResourcesNeededOptions.map(key => ({
+          text: this.translateMetadataString(key),
+          value: ResourcesNeededTypes[key],
+        }));
+      },
+      hint() {
+        if (Array.isArray(this.value) && this.value.includes(ResourcesNeededTypes.OTHER_SUPPLIES)) {
+          return this.$tr('furtherExplanation');
+        }
+        if (this.value && this.value[ResourcesNeededTypes.OTHER_SUPPLIES]) {
+          return this.$tr('furtherExplanation');
+        }
+        return '';
+      },
+    },
+    $trs: {
+      resourcesNeededLabel: 'Requirements',
+      furtherExplanation:
+        "Please add to the 'Description' field any additional supplies learners will need in order to use this resource",
+    },
+  };
+
+</script>
+<style lang="less">
+
+</style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
new file mode 100644
index 0000000000..4cfa9baa2b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/categoryOptions.spec.js
@@ -0,0 +1,84 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import { shallowMount } from '@vue/test-utils';
+import CategoryOptions from '../CategoryOptions.vue';
+
+Vue.use(Vuetify);
+
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
+  return shallowMount(CategoryOptions, {
+    propsData: {
+      value,
+      nodeIds,
+    },
+  });
+}
+
+describe('CategoryOptions', () => {
+  it('smoke test', () => {
+    const wrapper = makeWrapper();
+    expect(wrapper.isVueInstance()).toBe(true);
+  });
+  it('emits expected data', () => {
+    const wrapper = makeWrapper();
+    const value = 'string';
+    wrapper.vm.$emit('input', value);
+
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.emitted().input.length).toBe(1);
+    expect(wrapper.emitted().input[0]).toEqual([value]);
+  });
+
+  describe('display', () => {
+    it('has a tooltip that displays the tree for value of an item', () => {
+      const wrapper = makeWrapper();
+      const item = 'd&WXdXWF.5QAjgfv7.BUMJJBnS'; // 'Dance'
+      const expectedToolTip = 'School - Arts - Dance';
+
+      expect(wrapper.vm.tooltipText(item)).toEqual(expectedToolTip);
+    });
+    it(`dropdown has 'levels' key necessary to display the nested structure of categories`, () => {
+      const wrapper = makeWrapper();
+      const dropdown = wrapper.vm.categoriesList;
+      const everyCategoryHasLevelsKey = dropdown.every(item => 'level' in item);
+
+      expect(everyCategoryHasLevelsKey).toBeTruthy();
+    });
+  });
+
+  describe('interactions', () => {
+    it('when user checks an item, that is emitted to the parent component', () => {
+      const wrapper = makeWrapper();
+      const item = 'abcd';
+      wrapper.vm.$emit = jest.fn();
+      wrapper.vm.add(item);
+
+      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({ abcd: ['node1'] });
+    });
+    it('when user unchecks an item, that is emitted to the parent component', () => {
+      const wrapper = makeWrapper();
+      const item = 'defj';
+      wrapper.vm.$emit = jest.fn();
+      wrapper.vm.remove(item);
+
+      expect(wrapper.vm.$emit.mock.calls[0][0]).toBe('input');
+      expect(wrapper.vm.$emit.mock.calls[0][1]).toEqual({});
+    });
+  });
+
+  describe('close button on chip interactions', () => {
+    it('in the autocomplete bar, the chip is removed when user clicks on its close button', async () => {
+      const wrapper = makeWrapper({
+        value: {
+          'remove me': ['node1'],
+          'keep me': ['node1'],
+        },
+      });
+      const originalChipsLength = Object.keys(wrapper.vm.selected).length;
+      wrapper.vm.remove('remove me');
+
+      expect(wrapper.emitted().input.length).toEqual(originalChipsLength - 1);
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/learningActivityOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
similarity index 72%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/learningActivityOptions.spec.js
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
index 1dffac7921..c3767d3c8a 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/learningActivityOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/learningActivityOptions.spec.js
@@ -6,10 +6,11 @@ import { LearningActivities } from 'shared/constants';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(LearningActivityOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
@@ -21,7 +22,7 @@ describe('LearningActivityOptions', () => {
   });
 
   it('number of items in the dropdown should be equal to number of items available in ', async () => {
-    const wrapper = makeWrapper([]);
+    const wrapper = makeWrapper();
     await wrapper.find('.v-input__slot').trigger('click');
 
     const numberOfDropdownItems = Object.keys(LearningActivities).length;
@@ -32,27 +33,35 @@ describe('LearningActivityOptions', () => {
 
   describe('updating state', () => {
     it('should update learning_activity field with new values received from a parent', () => {
-      const learningActivity = ['activity_1', 'activity_2'];
-      const wrapper = makeWrapper(learningActivity);
+      const learningActivity = {
+        activity_1: ['node1'],
+        activity_2: ['node1'],
+      };
+      const wrapper = makeWrapper({ value: learningActivity, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(learningActivity);
+      expect(dropdown.props('value')).toEqual(['activity_1', 'activity_2']);
 
       wrapper.setProps({
-        value: ['activity_4'],
+        value: {
+          activity_4: ['node1'],
+        },
       });
       expect(dropdown.props('value')).toEqual(['activity_4']);
     });
 
     it('should emit new input values', () => {
-      const learningActivity = ['activity_1', 'activity_2', 'activity_3'];
-      const wrapper = makeWrapper({});
+      const learningActivity = ['activity_1', 'activity_2'];
+      const wrapper = makeWrapper();
       const dropdown = wrapper.find({ name: 'v-select' });
       dropdown.vm.$emit('input', learningActivity);
 
       return Vue.nextTick().then(() => {
         const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(learningActivity);
+        expect(emittedLevels).toEqual({
+          activity_1: ['node1'],
+          activity_2: ['node1'],
+        });
       });
     });
   });
diff --git a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/levelsOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
similarity index 67%
rename from contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/levelsOptions.spec.js
rename to contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
index 9fab21ed16..f306d1b50b 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/levelsOptions.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/levelsOptions.spec.js
@@ -6,10 +6,11 @@ import { ContentLevels } from 'shared/constants';
 
 Vue.use(Vuetify);
 
-function makeWrapper(value) {
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
   return mount(LevelsOptions, {
     propsData: {
       value,
+      nodeIds,
     },
   });
 }
@@ -22,7 +23,7 @@ describe('LevelsOptions', () => {
   });
 
   it('number of items in the dropdown should be equal to number of items available in ContentLevels', async () => {
-    const wrapper = makeWrapper([]);
+    const wrapper = makeWrapper();
     await wrapper.find('.v-input__slot').trigger('click');
 
     const numberOfAvailableLevels = Object.keys(ContentLevels).length;
@@ -33,27 +34,37 @@ describe('LevelsOptions', () => {
 
   describe('updating state', () => {
     it('should update levels field with new values received from a parent', () => {
-      const levels = ['abc', 'gefo'];
-      const wrapper = makeWrapper(levels);
+      const value = {
+        abc: ['node1'],
+        gefo: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
 
-      expect(dropdown.props('value')).toEqual(levels);
+      expect(dropdown.props('value')).toEqual(['abc', 'gefo']);
 
       wrapper.setProps({
-        value: ['def'],
+        value: {
+          def: ['node1'],
+        },
       });
       expect(dropdown.props('value')).toEqual(['def']);
     });
 
     it('should emit new input values', () => {
-      const levels = ['abc', 'gefo', '8hw'];
-      const wrapper = makeWrapper({});
+      const value = {
+        abc: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ['node1'] });
       const dropdown = wrapper.find({ name: 'v-select' });
-      dropdown.vm.$emit('input', levels);
+      dropdown.vm.$emit('input', ['abc', 'gefo']);
 
       return Vue.nextTick().then(() => {
         const emittedLevels = wrapper.emitted('input').pop()[0];
-        expect(emittedLevels).toEqual(levels);
+        expect(emittedLevels).toEqual({
+          abc: ['node1'],
+          gefo: ['node1'],
+        });
       });
     });
   });
diff --git a/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
new file mode 100644
index 0000000000..cc0757a09b
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/contentNodeFields/__tests__/resourcesNeededOptions.spec.js
@@ -0,0 +1,60 @@
+import Vue from 'vue';
+import Vuetify from 'vuetify';
+import { mount } from '@vue/test-utils';
+import ResourcesNeededOptions from '../ResourcesNeededOptions.vue';
+
+Vue.use(Vuetify);
+
+function makeWrapper({ value = {}, nodeIds = ['node1'] } = {}) {
+  return mount(ResourcesNeededOptions, {
+    propsData: {
+      value,
+      nodeIds,
+    },
+  });
+}
+
+describe('ResourcesNeededOptions', () => {
+  it('smoke test', () => {
+    const wrapper = makeWrapper();
+
+    expect(wrapper.isVueInstance()).toBe(true);
+  });
+
+  describe('updating state', () => {
+    it('should update resources field with new values received from a parent', () => {
+      const value = {
+        person: ['node1'],
+        book: ['node1'],
+      };
+      const wrapper = makeWrapper({ value, nodeIds: ['node1'] });
+      const dropdown = wrapper.find({ name: 'v-select' });
+
+      expect(dropdown.props('value')).toEqual(['person', 'book']);
+
+      wrapper.setProps({
+        value: {
+          train: ['node1'],
+        },
+      });
+      expect(dropdown.props('value')).toEqual(['train']);
+    });
+
+    it('should emit new input values', async () => {
+      const resourcesNeeded = {
+        person: ['node1'],
+      };
+      const wrapper = makeWrapper({ value: resourcesNeeded, nodeIds: ['node1'] });
+      const dropdown = wrapper.find({ name: 'v-select' });
+      dropdown.vm.$emit('input', ['person', 'book']);
+
+      await wrapper.vm.$nextTick();
+
+      const emittedLevels = wrapper.emitted('input').pop()[0];
+      expect(emittedLevels).toEqual({
+        person: ['node1'],
+        book: ['node1'],
+      });
+    });
+  });
+});
diff --git a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
index 266f25e7a8..127eeabd7a 100644
--- a/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/form/ExpandableSelect.vue
@@ -7,7 +7,7 @@
   >
     <template #default="{ attach, menuProps }">
       <VSelect
-        v-model="valueModel"
+        v-model="selectInputValueModel"
         box
         :disabled="disabled"
         :placeholder="placeholder"
@@ -17,6 +17,12 @@
         :rules="rules"
         :menu-props="menuProps"
         :attach="attach"
+        :chips="multiple"
+        :multiple="multiple"
+        :clearable="multiple"
+        :deletableChips="multiple"
+        :hint="hint"
+        :persistent-hint="!!hint"
         @focus="$emit('focus')"
       />
     </template>
@@ -25,16 +31,38 @@
     v-else
     :class="disabled ? 'disabled' : ''"
   >
-    <h5>
+    <h5 v-if="!hideLabel">
       {{ label }}
     </h5>
-    <KRadioButton
-      v-for="duration in options"
-      :key="duration.value"
-      v-model="valueModel"
-      :buttonValue="duration.value"
-      :label="duration.text"
-    />
+    <div>
+      <template v-if="!multiple">
+        <KRadioButton
+          v-for="option in options"
+          :key="option.value"
+          v-model="valueModel"
+          :buttonValue="option.value"
+          :label="option.text"
+        />
+      </template>
+      <template v-else>
+        <KCheckbox
+          v-for="option in options"
+          :key="option.value"
+          :label="option.text"
+          :checked="isSelected(option.value)"
+          :indeterminate="isIndeterminate(option.value)"
+          data-test="option-checkbox"
+          @change="value => setOption(option.value, value)"
+        />
+      </template>
+    </div>
+    <p
+      v-if="hint"
+      :style="{ color: $themeTokens.annotation }"
+    >
+      {{ hint }}
+    </p>
+
   </div>
 
 </template>
@@ -48,15 +76,31 @@
     name: 'ExpandableSelect',
     components: { DropdownWrapper },
     props: {
+      /**
+       * It can receive a value as a string for single select or an object with
+       * the following structure for multiple select:
+       * {
+       *   [optionId]: [itemId1, itemId2, ...]
+       * }
+       * where itemId is the id of the item that has the option selected
+       */
       value: {
-        type: String,
-        required: false,
-        default: '',
+        type: [String, Object],
+        required: true,
       },
       options: {
         type: Array,
         required: true,
       },
+      /**
+       * If the select is multiple, this prop is required, and it
+       * represents the available items that can have the options selected
+       */
+      availableItems: {
+        type: Array,
+        required: false,
+        default: () => [],
+      },
       placeholder: {
         type: String,
         required: false,
@@ -67,6 +111,11 @@
         required: false,
         default: '',
       },
+      hideLabel: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
       rules: {
         type: Array,
         required: false,
@@ -84,6 +133,14 @@
         type: Boolean,
         default: false,
       },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      hint: {
+        type: String,
+        default: '',
+      },
     },
     computed: {
       valueModel: {
@@ -94,6 +151,27 @@
           this.$emit('input', value);
         },
       },
+      selectInputValueModel: {
+        get() {
+          if (this.multiple) {
+            return Object.keys(this.valueModel).filter(
+              key => this.valueModel[key].length === this.availableItems.length
+            );
+          }
+          return this.valueModel;
+        },
+        set(value) {
+          if (this.multiple) {
+            const newValueModel = {};
+            value.forEach(optionId => {
+              newValueModel[optionId] = this.availableItems;
+            });
+            this.valueModel = newValueModel;
+          } else {
+            this.valueModel = value;
+          }
+        },
+      },
     },
     methods: {
       /**
@@ -104,6 +182,30 @@
           return getInvalidText(this.rules, this.valueModel);
         }
       },
+      isSelected(value) {
+        if (!this.valueModel[value]) {
+          return false;
+        }
+        return this.valueModel[value].length === this.availableItems.length;
+      },
+      isIndeterminate(value) {
+        if (!this.valueModel[value]) {
+          return false;
+        }
+        return this.valueModel[value].length < this.availableItems.length;
+      },
+      setOption(optionId, value) {
+        if (value) {
+          this.valueModel = {
+            ...this.valueModel,
+            [optionId]: this.availableItems,
+          };
+        } else {
+          const newValueModel = { ...this.valueModel };
+          delete newValueModel[optionId];
+          this.valueModel = newValueModel;
+        }
+      },
     },
   };