1 files changed, 26 insertions, 5 deletions
diff --git a/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue b/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
index b1809e6a9f3..bc6b5d3176f 100644
--- a/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
+++ b/app/assets/javascripts/vue_shared/components/listbox_input/listbox_input.vue
@@ -1,25 +1,37 @@
 <script>
-import { GlListbox } from '@gitlab/ui';
+import { GlFormGroup, GlListbox } from '@gitlab/ui';
 import { __ } from '~/locale';
 
-const MIN_ITEMS_COUNT_FOR_SEARCHING = 20;
+const MIN_ITEMS_COUNT_FOR_SEARCHING = 10;
 
 export default {
   i18n: {
     noResultsText: __('No results found'),
   },
   components: {
+    GlFormGroup,
     GlListbox,
   },
   model: GlListbox.model,
   props: {
+    label: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    description: {
+      type: String,
+      required: false,
+      default: '',
+    },
     name: {
       type: String,
       required: true,
     },
     defaultToggleText: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     selected: {
       type: String,
@@ -30,6 +42,11 @@ export default {
       type: GlListbox.props.items.type,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -37,6 +54,9 @@ export default {
     };
   },
   computed: {
+    wrapperComponent() {
+      return this.label || this.description ? 'gl-form-group' : 'div';
+    },
     allOptions() {
       const allOptions = [];
 
@@ -95,16 +115,17 @@ export default {
 </script>
 
 <template>
-  <div>
+  <component :is="wrapperComponent" :label="label" :description="description" v-bind="$attrs">
     <gl-listbox
       :selected="selected"
       :toggle-text="toggleText"
       :items="filteredItems"
       :searchable="isSearchable"
       :no-results-text="$options.i18n.noResultsText"
+      :disabled="disabled"
       @search="search"
       @select="$emit($options.model.event, $event)"
     />
     <input ref="input" type="hidden" :name="name" :value="selected" />
-  </div>
+  </component>
 </template>