diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 42e1577e6639b2026774bc297959da413aa51e25..dee97347496157268e2549117c7826fe6c86ec03 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlSprintf, GlLink } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink, GlFormCheckbox } from '@gitlab/ui';
 import { mapGetters, mapActions, mapState } from 'vuex';
 import { mergeUrlParams } from '~/lib/utils/url_utility';
 import { __ } from '~/locale';
@@ -20,6 +20,7 @@ export default {
     GlButton,
     GlSprintf,
     GlLink,
+    GlFormCheckbox,
   },
   mixins: [issuableStateMixin, resolvable, glFeaturesFlagMixin()],
   props: {
@@ -372,12 +373,14 @@ export default {
           <p v-if="showResolveDiscussionToggle">
             <label>
               <template v-if="discussionResolved">
-                <input v-model="isUnresolving" type="checkbox" class="js-unresolve-checkbox" />
-                {{ __('Unresolve thread') }}
+                <gl-form-checkbox v-model="isUnresolving" class="js-unresolve-checkbox">
+                  {{ __('Unresolve thread') }}
+                </gl-form-checkbox>
               </template>
               <template v-else>
-                <input v-model="isResolving" type="checkbox" class="js-resolve-checkbox" />
-                {{ __('Resolve thread') }}
+                <gl-form-checkbox v-model="isResolving" class="js-resolve-checkbox">
+                  {{ __('Resolve thread') }}
+                </gl-form-checkbox>
               </template>
             </label>
           </p>
diff --git a/spec/frontend/notes/components/note_form_spec.js b/spec/frontend/notes/components/note_form_spec.js
index 00f75b14e6b68602c00093fd37fb8b0d99d591c7..e385c478dd6e5398404ded5c45a4ea7bec2e252d 100644
--- a/spec/frontend/notes/components/note_form_spec.js
+++ b/spec/frontend/notes/components/note_form_spec.js
@@ -1,4 +1,4 @@
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlFormCheckbox } from '@gitlab/ui';
 import { nextTick } from 'vue';
 import batchComments from '~/batch_comments/stores/modules/batch_comments';
 import NoteForm from '~/notes/components/note_form.vue';
@@ -234,7 +234,7 @@ describe('issue_note_form component', () => {
     });
 
     it('shows resolve checkbox', () => {
-      expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(true);
+      expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(true);
     });
 
     it('hides resolve checkbox', async () => {
@@ -253,7 +253,7 @@ describe('issue_note_form component', () => {
         },
       });
 
-      expect(wrapper.find('.js-resolve-checkbox').exists()).toBe(false);
+      expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(false);
     });
 
     it('hides actions for commits', async () => {