var Component=(()=>{var C=Object.create;var o=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var g=(n,l)=>()=>(l||n((l={exports:{}}).exports,l),l.exports),B=(n,l)=>{for(var s in l)o(n,s,{get:l[s],enumerable:!0})},D=(n,l,s,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let c of N(l))!S.call(n,c)&&c!==s&&o(n,c,{get:()=>l[c],enumerable:!(a=u(l,c))||a.enumerable});return n};var x=(n,l,s)=>(s=n!=null?C(f(n)):{},D(l||!n||!n.__esModule?o(s,"default",{value:n,enumerable:!0}):s,n)),E=n=>D(o({},"__esModule",{value:!0}),n);var F=g((v,y)=>{y.exports=_jsx_runtime});var b={};B(b,{default:()=>w,frontmatter:()=>I});var e=x(F()),I={title:"Searchfield",description:"A search field allows a user to enter and clear a search query.",component:!0,featured:!0,links:{doc:"https://react-spectrum.adobe.com/react-aria/SearchField.html"}};function m(n){let l=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h2:"h2",a:"a",p:"p",strong:"strong",h3:"h3"},n.components),{ComponentPreview:s,Tabs:a,TabsList:c,TabsTrigger:i,TabsContent:d,Steps:t,Step:h,ComponentSource:p}=l;return s||r("ComponentPreview",!0),p||r("ComponentSource",!0),h||r("Step",!0),t||r("Steps",!0),a||r("Tabs",!0),d||r("TabsContent",!0),c||r("TabsList",!0),i||r("TabsTrigger",!0),(0,e.jsxs)(e.Fragment,{children:[(0,e.jsxs)(s,{name:"searchfield-demo",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { SearchIcon, XIcon } from "lucide-react" import { SearchField, SearchFieldClear, SearchFieldInput, } from "@/components/ui/searchfield" export function SearchFieldDemo() { return ( ) } `,__src__:"registry/default/example/searchfield/searchfield-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { SearchIcon, XIcon } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lucide-react"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" SearchField,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" SearchFieldClear,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" SearchFieldInput,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/searchfield"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"SearchFieldDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SearchField"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[200px]"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SearchIcon"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-hidden"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4 text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SearchFieldInput"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SearchFieldClear"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"XIcon"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-hidden"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons" import { SearchField, SearchFieldClear, SearchFieldInput, } from "@/components/ui/searchfield" export function SearchFieldDemo() { return ( ) } `,__src__:"registry/new-york/example/searchfield/searchfield-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Cross2Icon, MagnifyingGlassIcon } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@radix-ui/react-icons"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" SearchField,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" SearchFieldClear,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" SearchFieldInput,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@/components/ui/searchfield"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"SearchFieldDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SearchField"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"max-w-[200px]"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"MagnifyingGlassIcon"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-hidden"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4 text-muted-foreground"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SearchFieldInput"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SearchFieldClear"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Cross2Icon"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"aria-hidden"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:" "})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(a,{defaultValue:"cli",children:[(0,e.jsxs)(c,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Copy & Paste"})]}),(0,e.jsxs)(d,{value:"cli",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @sly-cli/sly add jolly-ui searchfield `,__npmCommand__:`npx @sly-cli/sly add jolly-ui searchfield `,__yarnCommand__:`npx @sly-cli/sly add jolly-ui searchfield `,__pnpmCommand__:`pnpm dlx @sly-cli/sly add jolly-ui searchfield `,__bunCommand__:`bunx --bun @sly-cli/sly add jolly-ui searchfield `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"@sly-cli/sly"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"jolly-ui"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:"searchfield"})]})})})}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.strong,{children:"Note: Only the default style can be installed via CLI at the moment"})})]}),(0,e.jsx)(d,{value:"manual",children:(0,e.jsxs)(t,{children:[(0,e.jsx)(h,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(p,{name:"searchfield",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button, ButtonProps, Input, InputProps, SearchFieldProps, SearchField as _SearchField, } from "react-aria-components" import { cn } from "@/lib/utils" function SearchFieldInput({ className, ...props }: InputProps) { return ( ) } function SearchField({ className, ...props }: SearchFieldProps) { return ( <_SearchField className={cn( "group flex h-10 w-full items-center overflow-hidden rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 group-data-[disabled]:opacity-50", className )} {...props} /> ) } function SearchFieldClear({ className, ...props }: ButtonProps) { return (

Searchfield

Installation

Usage

Basic

Disabled

Custom Icons