diff --git a/src/components/NotesView.vue b/src/components/NotesView.vue
index 4d6136ef8..8d7c4bcea 100644
--- a/src/components/NotesView.vue
+++ b/src/components/NotesView.vue
@@ -8,7 +8,8 @@
 		<template slot="list">
 			<NcAppContentList class="content-list">
 				<div class="content-list__search">
-					<input type="search" :placeholder="t('notes', 'Search for notes')" @input="event => searchText = event.target.value">
+					<NcTextField :value.sync="searchText" :label="t('notes', 'Search for notes')" :show-trailing-button="searchText !== ''" trailing-button-icon="close" :trailing-button-label="t('Clear search')" @trailing-button-click="searchText=''">
+					</NcTextField>
 				</div>
 
 				<NotesList v-if="groupedNotes.length === 1"
@@ -58,7 +59,9 @@ import {
 	NcAppContentList,
 	NcAppContentDetails,
 	NcButton,
+	NcTextField,
 } from '@nextcloud/vue'
+
 import { categoryLabel } from '../Util.js'
 import NotesList from './NotesList.vue'
 import NotesCaption from './NotesCaption.vue'
@@ -75,6 +78,7 @@ export default {
 		NcAppContentList,
 		NcAppContentDetails,
 		NcButton,
+		NcTextField,
 		Note,
 		NotesList,
 		NotesCaption,
@@ -98,6 +102,7 @@ export default {
 			lastYear: new Date(new Date().getFullYear() - 1, 0),
 			showFirstNotesOnly: true,
 			showNote: true,
+			searchText: '',
 		}
 	},
 
@@ -143,18 +148,11 @@ export default {
 				}, [])
 			}
 		},
-		searchText: {
-			get() {
-				return store.state.searchText
-			},
-			set(value) {
-				store.commit('updateSearchText', value)
-			},
-		},
 	},
 
 	watch: {
 		category() { this.showFirstNotesOnly = true },
+		searchText(value) { store.commit('updateSearchText', value) },
 	},
 
 	created() {