diff --git a/tests/app/ui/search-bar/search-bar-code-snippet.ts b/tests/app/ui/search-bar/search-bar-code-snippet.ts
new file mode 100644
index 000000000..0f584a4b4
--- /dev/null
+++ b/tests/app/ui/search-bar/search-bar-code-snippet.ts
@@ -0,0 +1,17 @@
+import { EventData } from 'tns-core-modules/data/observable';
+import { SearchBar } from "tns-core-modules/ui/search-bar"
+
+export function navigatingTo(args: EventData) {
+    console.log("page navigating to");
+}
+// >> searchbar-clear
+export function onClear(args){
+    console.log("clear search-bar text");
+}
+// << searchbar-clear
+// >> searchbar-submit
+export function onSubmit(args){
+    var searchbar:SearchBar = <SearchBar>args.object;
+    console.log("Search submit result: "+searchbar.text);
+}
+// << searchbar-submit
\ No newline at end of file
diff --git a/tests/app/ui/search-bar/search-bar.md b/tests/app/ui/search-bar/search-bar.md
index 676b26db1..d8fa411ff 100644
--- a/tests/app/ui/search-bar/search-bar.md
+++ b/tests/app/ui/search-bar/search-bar.md
@@ -5,6 +5,18 @@ environment: nativescript
 description: "Examples for using search-bar"
 previous_url: /ApiReference/ui/search-bar/HOW-TO
 ---
+# Declare SearchBar via XML
+```XML
+<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
+    <StackLayout class="p-20">
+       <SearchBar id="searchBar" hint="Search" text="" clear="onClear" submit="onSubmit" />
+    </StackLayout>
+</Page>
+```
+## SearchBar submit event
+{%snippet searchbar-submit%}
+## SearchBar clear event
+{%snippet searchbar-clear%}
 # SearchBar
 Using the SearchBar requires the "ui/search-bar" module.
 {%snippet article-require-searchbar-module%}