Picture

) } `,__src__:"registry/default/example/input-file.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputFile"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"grid w-full max-w-sm items-center gap-1.5"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"picture"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Picture"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input id"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"picture"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"file"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function InputFile() { return (

Picture

) } `,__src__:"registry/new-york/example/input-file.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputFile"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"grid w-full max-w-sm items-center gap-1.5"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"picture"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Picture"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input id"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"picture"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"file"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h3,{id:"\u7981\u7528",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u7981\u7528",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u7981\u7528"]}),` `,(0,l.jsxs)(s,{name:"input-disabled",className:"[&_input]:max-w-xs",description:"\u4E00\u4E2A\u7981\u7528\u7684\u8F93\u5165\u7EC4\u4EF6\u3002",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Input } from "@/components/ui/input" export function InputDisabled() { return } `,__src__:"registry/default/example/input-disabled.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputDisabled"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input disabled type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"Email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Input } from "@/components/ui/input" export function InputDisabled() { return } `,__src__:"registry/new-york/example/input-disabled.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputDisabled"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input disabled type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"Email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h3,{id:"\u5E26\u6807\u7B7E",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5E26\u6807\u7B7E",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u5E26\u6807\u7B7E"]}),` `,(0,l.jsxs)(s,{name:"input-with-label",className:"[&_input]:max-w-xs",description:"\u4E00\u4E2A\u5E26\u6807\u7B7E\u7684\u8F93\u5165\u7EC4\u4EF6\u3002",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function InputWithLabel() { return (

) } `,__src__:"registry/default/example/input-with-label.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputWithLabel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"grid w-full max-w-sm items-center gap-1.5"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Email"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"Email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" export function InputWithLabel() { return (

) } `,__src__:"registry/new-york/example/input-with-label.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Label "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputWithLabel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"grid w-full max-w-sm items-center gap-1.5"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Email"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" id"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"Email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h3,{id:"\u5E26\u6309\u94AE",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5E26\u6309\u94AE",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u5E26\u6309\u94AE"]}),` `,(0,l.jsxs)(s,{name:"input-with-button",className:"[&_input]:max-w-xs",description:"\u4E00\u4E2A\u5E26\u6309\u94AE\u7684\u8F93\u5165\u7EC4\u4EF6\u3002",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function InputWithButton() { return (

) } `,__src__:"registry/default/example/input-with-button.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Button "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputWithButton"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"flex w-full max-w-sm items-center space-x-2"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"Email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Button type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"submit"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Subscribe"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" export function InputWithButton() { return (

) } `,__src__:"registry/new-york/example/input-with-button.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Button "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputWithButton"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"div className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"flex w-full max-w-sm items-center space-x-2"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"Email"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Button type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"submit"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Subscribe"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(n.h3,{id:"\u8868\u5355",children:[(0,l.jsx)(n.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u8868\u5355",children:(0,l.jsx)(n.span,{className:"icon icon-link"})}),"\u8868\u5355"]}),` `,(0,l.jsxs)(s,{name:"input-form",children:[(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" const FormSchema = z.object({ username: z.string().min(2, { message: "Username must be at least 2 characters.", }), }) export function InputForm() { const form = useForm>({ resolver: zodResolver(FormSchema), defaultValues: { username: "", }, }) function onSubmit(data: z.infer) { toast({ title: "You submitted the following values:", description: (

          {JSON.stringify(data, null, 2)}

), }) } return (

( Username This is your public display name. )} /> ) } `,__src__:"registry/default/example/input-form.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zodResolver "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@hookform/resolvers/zod"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useForm "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react-hook-form"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" z "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "zod"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Button "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormControl"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormDescription"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormField"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormItem"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormLabel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormMessage"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/form"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" toast "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/use-toast"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormSchema "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"object"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" username"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"min"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(2,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" message"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "Username must be at least 2 characters."'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"})"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputForm"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" form "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useForm"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" resolver"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zodResolver"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormSchema"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" defaultValues"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" username"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' ""'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" toast"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "You submitted the following values:"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" description"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"pre className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"code className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"text-white"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"JSON"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"stringify"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" null,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 2)}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Form "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"{..."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"handleSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-2/3 space-y-6"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormField"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" control"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"control"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" name"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"username"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" render"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={({"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" field "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"})"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormItem"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormLabel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Username"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormControl"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"shadcn"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"field"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormDescription"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" This is your public display name."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormMessage "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Button type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"submit"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Submit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})}),(0,l.jsx)(n.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(n.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { z } from "zod" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { toast } from "@/components/ui/use-toast" const FormSchema = z.object({ username: z.string().min(2, { message: "Username must be at least 2 characters.", }), }) export function InputForm() { const form = useForm>({ resolver: zodResolver(FormSchema), defaultValues: { username: "", }, }) function onSubmit(data: z.infer) { toast({ title: "You submitted the following values:", description: (

          {JSON.stringify(data, null, 2)}

), }) } return (

( Username This is your public display name. )} /> ) } `,__src__:"registry/new-york/example/input-form.tsx",children:(0,l.jsxs)(n.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zodResolver "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@hookform/resolvers/zod"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useForm "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "react-hook-form"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" z "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "zod"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Button "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormControl"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormDescription"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormField"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormItem"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormLabel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormMessage"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/form"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" Input "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/input"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"import"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" toast "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" from"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "@/components/ui/use-toast"'})]}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" FormSchema "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"object"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" username"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"string"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"min"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"(2,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" message"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "Username must be at least 2 characters."'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"})"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"export"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" InputForm"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"()"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" const"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" form "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" useForm"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"<"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" resolver"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" zodResolver"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormSchema"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" defaultValues"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" username"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' ""'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" function"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" z"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" toast"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" title"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:' "You submitted the following values:"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF",fontWeight:"bold"},children:" description"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:":"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"pre className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"code className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"text-white"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">{"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"JSON"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"stringify"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"data"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:","}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" null,"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" 2)}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ),"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,l.jsx)(n.span,{className:"line",children:" "}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" return"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Form "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"{..."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"handleSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"("}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"onSubmit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:")}"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" className"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"w-2/3 space-y-6"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormField"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" control"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"form"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"control"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" name"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"username"'})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" render"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"={({"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" field "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"})"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" =>"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormItem"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormLabel"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Username"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormControl"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Input placeholder"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"shadcn"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" {..."}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"field"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormDescription"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF"},children:" This is your public display name."})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"FormMessage "}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"/>"})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" <"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Button type"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"="}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:'"submit"'}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:">"}),(0,l.jsx)(n.span,{style:{color:"#FFF"},children:"Submit"}),(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsxs)(n.span,{className:"line",children:[(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,l.jsx)(n.span,{className:"line",children:(0,l.jsx)(n.span,{style:{color:"#FFF8"},children:"}"})})]})})})]})]})}function L(e={}){let{wrapper:n}=e.components||{};return n?(0,l.jsx)(n,Object.assign({},e,{children:(0,l.jsx)(u,e)})):u(e)}var W=L;function F(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(k);})(); ;return Component;

输入

安装

使用

示例

默认

文件

禁用

带标签

带按钮

表单