) } `,__src__:"src/demo/text-input-state-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { Switch } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/switch"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { TextInput } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/text-input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"TextInputDemo"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [value, setValue] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [disabled, setDisabled] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"true"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [readonly, setReadonly] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"false"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [error, setError] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [help, setHelp] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"w-full"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Text Input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{value}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setValue}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" disabled"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{disabled}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" readonly"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{readonly}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" error"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{error}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" help"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{help}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"p-4 border rounded-[--radius] mt-4 space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"flex gap-2"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Switch"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{disabled} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setDisabled} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Disabled"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Switch"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{readonly} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setReadonly} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Readonly"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"flex gap-2"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{error} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setError} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Error"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{help} onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setHelp} label"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Help/Description"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h3,{id:"addons",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#addons",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Addons"]}),` `,(0,l.jsx)(s,{name:"text-input-addons-demo",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Switch } from "@/components/ui/switch" import { TextInput } from "@/components/ui/text-input" import * as React from "react" import { BiSearch, BiUser } from "react-icons/bi" export function TextInputDemo() { const [value, setValue] = React.useState("") return (

} /> } /> } />

) } `,__src__:"src/demo/text-input-addons-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { Switch } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/switch"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { TextInput } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"@/components/ui/text-input"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" { BiSearch, BiUser } "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"react-icons/bi"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"TextInputDemo"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" [value, setValue] = React."}),(0,l.jsx)(e.span,{style:{color:"#EBC88D"},children:"useState"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'""'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:")"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"div"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"w-full space-y-2"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{value}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setValue}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" leftIcon"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{<"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"BiSearch"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" />}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{value}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setValue}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" rightIcon"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{<"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"BiSearch"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" />}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{value}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setValue}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" leftAddon"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"https://"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" rightAddon"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'".com"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInput"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{value}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{setValue}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" leftAddon"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"Username"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" leftIcon"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:"{<"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"BiUser"}),(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" />}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#AF9CFF"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"/>"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"api-reference",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#api-reference",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"API Reference"]}),` `,(0,l.jsxs)(c,{name:"text-input",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:"No styles",__src__:"src/workshop/text-input/text-input.tsx",children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"No styles"})})})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`type TextInputProps = Omit, "size"> & InputStyling & BasicFieldOptions & { /** * Callback invoked when the value changes. Returns the string value. */ onValueChange?: (value: string) => void }`,__src__:"src/workshop/text-input/text-input.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"TextInputProps"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" = "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"Omit"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"React"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"."}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"ComponentPropsWithRef"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"input"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:">, "}),(0,l.jsx)(e.span,{style:{color:"#DEA060"},children:'"size"'}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"> &"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"InputStyling"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#84BFF9"},children:"BasicFieldOptions"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" & {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#898989"},children:"/**"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" * Callback invoked when the value changes. Returns the string value."})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#898989"},children:" */"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#EEEEEE",fontWeight:"bold"},children:"onValueChange"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"?: (value: string) "}),(0,l.jsx)(e.span,{style:{color:"#7ECBC7"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:" void"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#CACACA"},children:"}"})})]})})})]})]})}function x(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(C,n)})):C(n)}var B=x;function d(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return E(f);})(); ;return Component;

Text Input

Installation

Usage

State

Addons

API Reference

Types

Anatomy