Add placeholder to search field

tinytek-io · Jul 17, 2024 · d0d4698 · d0d4698
1 parent bdb3d11
commit d0d4698
Showing 1 changed file with 3 additions and 2 deletions.
diff --git 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>