) }`,children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Search } "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"lucide-react"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Label, SearchField, SearchFieldInput } "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"ui"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B"},children:" Default"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"SearchField"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Search"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"relative"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" aria-hidden"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-500 dark:text-slate-400"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Search"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"18"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"SearchFieldInput"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"px-10"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})}),` `,(0,n.jsx)(r,{lvl:"3",slug:"with-clear-button",children:"With Clear Button"}),` `,(0,n.jsxs)(l.p,{children:["Use ",(0,n.jsx)(l.strong,{children:(0,n.jsx)(l.code,{children:"SearchFieldClearButton"})})," to display a button that clear the ",(0,n.jsx)(l.strong,{children:(0,n.jsx)(l.code,{children:"SearchField"})})," input. By default, it will only show up when the input is not empty."]}),` `,(0,n.jsx)(d,{name:"search-field",story:"with-clear-button",children:(0,n.jsx)(l.figure,{__src__:"registry/search-field/with-clear-button.tsx","data-rehype-pretty-code-figure":"",__rawString__:`import { Search } from 'lucide-react' import { Label, SearchField, SearchFieldClearButton, SearchFieldInput, } from 'ui' export function WithClearButton() { return ( Search

) }`,children:(0,n.jsx)(l.pre,{style:{backgroundColor:"#282A36",color:"#F8F8F2"},tabIndex:"0","data-language":"tsx","data-theme":"dracula",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"dracula",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" { Search } "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"lucide-react"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" {"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" Label,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" SearchField,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" SearchFieldClearButton,"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" SearchFieldInput,"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"} "}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:" '"}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"ui"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:"'"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B"},children:" WithClearButton"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"() {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"SearchField"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Label"}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">Search"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"relative"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" aria-hidden"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-500 dark:text-slate-400"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" >"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"Search"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"18"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"SearchFieldInput"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"px-10"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"absolute inset-y-0 right-0 flex items-center p-1"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:">"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#8BE9FD",fontStyle:"italic"},children:"SearchFieldClearButton"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" variant"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"subtle"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" size"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"sm"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#50FA7B",fontStyle:"italic"},children:" aria-label"}),(0,n.jsx)(l.span,{style:{color:"#FF79C6"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'}),(0,n.jsx)(l.span,{style:{color:"#F1FA8C"},children:"Clear search"}),(0,n.jsx)(l.span,{style:{color:"#E9F284"},children:'"'})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" />"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" "})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:" )"})}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#F8F8F2"},children:"}"})})]})})})})]})}function _(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,Object.assign({},e,{children:(0,n.jsx)(u,e)})):u(e)}var v=_;function a(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return A(I);})(); ;return Component;

Search Field

Installation

Examples

Default

With Clear Button