From d0d4698a15b968194dc307c6d0227fda9c58d7fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?=
 <1136718+raix@users.noreply.github.com>
Date: Wed, 17 Jul 2024 22:16:20 +0200
Subject: [PATCH] Add placeholder to search field

---
 ui/components/SearchField.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/components/SearchField.tsx b/ui/components/SearchField.tsx
index 09b5b3f..f404069 100644
--- a/ui/components/SearchField.tsx
+++ b/ui/components/SearchField.tsx
@@ -18,10 +18,11 @@ import { composeTailwindRenderProps } from "./utils";
 export interface SearchFieldProps extends AriaSearchFieldProps {
   label?: string;
   description?: string;
+  placeholder?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
 }
 
-export function SearchField({ label, description, errorMessage, ...props }: Readonly<SearchFieldProps>) {
+export function SearchField({ label, description, errorMessage, placeholder, ...props }: Readonly<SearchFieldProps>) {
   return (
     <AriaSearchField
       {...props}
@@ -33,7 +34,7 @@ export function SearchField({ label, description, errorMessage, ...props }: Read
           aria-hidden
           className="ml-2 h-4 w-4 text-muted-foreground group-disabled:opacity-50 forced-colors:text-[ButtonText] forced-colors:group-disabled:text-[GrayText]"
         />
-        <Input isEmbedded className="[&::-webkit-search-cancel-button]:hidden" />
+        <Input placeholder={placeholder} isEmbedded className="[&::-webkit-search-cancel-button]:hidden" />
         <Button variant="ghost" size="icon" className="mr-1 w-6 group-empty:invisible">
           <XIcon aria-hidden className="h-4 w-4" />
         </Button>