Add placeholder attribute in canary-input

fastrepl · Oct 29, 2024 · 5bab7e4 · 5bab7e4
1 parent 3c5d973
commit 5bab7e4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/js/packages/web/.changeset/fuzzy-hotels-sell.md b/js/packages/web/.changeset/fuzzy-hotels-sell.md
@@ -0,0 +1,5 @@
+---
+"@getcanary/web": patch
+---
+
+Add placeholder attribute in canary-input.
diff --git a/js/packages/web/src/components/canary-input.ts b/js/packages/web/src/components/canary-input.ts
@@ -31,6 +31,9 @@ export class CanaryInput extends LitElement {
   @property({ type: Boolean })
   autofocus = false;
 
+  @property({ type: String })
+  placeholder = "Search for anything...";
+
   @consume({ context: queryContext, subscribe: true })
   @state()
   private _query: QueryContext = { text: "", tags: [] };
@@ -94,7 +97,7 @@ export class CanaryInput extends LitElement {
           .value=${this._query.text}
           autocomplete="off"
           spellcheck="false"
-          placeholder="Search for anything..."
+          placeholder=${this.placeholder}
           @input=${this._handleInput}
           @keydown=${this._handleKeyDown}
           onfocus="this.setSelectionRange(this.value.length,this.value.length);"