}
`,__src__:"registry/new-york/examples/textarea-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}
`,__src__:"registry/default/examples/textarea-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h2,{id:"\u5B89\u88C5",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5B89\u88C5",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u5B89\u88C5"]}),`
`,(0,e.jsxs)(s,{children:[(0,e.jsxs)(h,{children:[(0,e.jsx)(d,{value:"cli",children:"\u547D\u4EE4\u884C"}),(0,e.jsx)(d,{value:"manual",children:"\u624B\u52A8"})]}),(0,e.jsx)(i,{value:"cli",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add textarea
`,__npmCommand__:`npx shadcn@latest add textarea
`,__yarnCommand__:`npx shadcn@latest add textarea
`,__pnpmCommand__:`pnpm dlx shadcn@latest add textarea
`,__bunCommand__:`bunx --bun shadcn@latest add textarea
`,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" shadcn@latest"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:" textarea"})]})})})})}),(0,e.jsx)(i,{value:"manual",children:(0,e.jsxs)(p,{children:[(0,e.jsx)(t,{children:"\u5C06\u4EE5\u4E0B\u4EE3\u7801\u590D\u5236\u5E76\u7C98\u8D34\u5230\u60A8\u7684\u9879\u76EE\u4E2D\u3002"}),(0,e.jsxs)(a,{name:"textarea",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
`,__src__:"registry/new-york/ui/textarea.tsx",__style__:"new-york",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" Textarea"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  HTMLTextAreaElement,"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  React.ComponentProps"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"textarea"'}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"      className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        className"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"      ref"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    />"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"Textarea.displayName "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "Textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea }"})]})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import * as React from "react"

import { cn } from "@/lib/utils"

const Textarea = React.forwardRef<
  HTMLTextAreaElement,
  React.ComponentProps<"textarea">
>(({ className, ...props }, ref) => {
  return (
    <textarea
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
        className
      )}
      ref={ref}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
`,__src__:"registry/default/ui/textarea.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" Textarea"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"<"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  HTMLTextAreaElement,"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  React.ComponentProps"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"textarea"'}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"      className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        className"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      )}"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"      ref"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    />"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"Textarea.displayName "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "Textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea }"})]})]})})})]}),(0,e.jsx)(t,{children:"\u66F4\u65B0\u5BFC\u5165\u8DEF\u5F84\u4EE5\u5339\u914D\u60A8\u7684\u9879\u76EE\u8BBE\u7F6E\u3002"})]})})]}),`
`,(0,e.jsxs)(l.h2,{id:"\u4F7F\u7528",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u4F7F\u7528",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u4F7F\u7528"]}),`
`,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from "@/components/ui/textarea"
`,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]})})})}),`
`,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`<Textarea />
`,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]})})})}),`
`,(0,e.jsxs)(l.h2,{id:"\u793A\u4F8B",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u793A\u4F8B",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u793A\u4F8B"]}),`
`,(0,e.jsxs)(l.h3,{id:"\u9ED8\u8BA4",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u9ED8\u8BA4",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u9ED8\u8BA4"]}),`
`,(0,e.jsxs)(r,{name:"textarea-demo",description:"\u4E00\u4E2A\u6587\u672C\u533A\u57DF",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from "@/components/ui/textarea"

export function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}
`,__src__:"registry/new-york/examples/textarea-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaDemo"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from "@/components/ui/textarea"

export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/new-york/examples/textarea-disabled.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaDisabled"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" disabled"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Textarea } from "@/components/ui/textarea"

export function TextareaDisabled() {
  return <Textarea placeholder="Type your message here." disabled />
}
`,__src__:"registry/default/examples/textarea-disabled.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaDisabled"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" disabled"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"\u5E26\u6807\u7B7E",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5E26\u6807\u7B7E",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u5E26\u6807\u7B7E"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-label",className:"[&_div.grid]:w-full",description:"\u4E00\u4E2A\u5E26\u6807\u7B7E\u7684\u6587\u672C\u533A\u57DF",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}
`,__src__:"registry/new-york/examples/textarea-with-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaWithLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Your message</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}
`,__src__:"registry/default/examples/textarea-with-label.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaWithLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Your message</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"\u5E26\u6587\u672C",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5E26\u6587\u672C",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u5E26\u6587\u672C"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-text",description:"\u4E00\u4E2A\u5E26\u6587\u672C\u7684\u6587\u672C\u533A\u57DF",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithText() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}
`,__src__:"registry/new-york/examples/textarea-with-text.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaWithText"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Your Message</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        Your message will be copied to the support team."})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithText() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}
`,__src__:"registry/default/examples/textarea-with-text.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/label"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaWithText"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-1.5"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Your Message</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"message-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-sm text-muted-foreground"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        Your message will be copied to the support team."})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"\u5E26\u6309\u94AE",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5E26\u6309\u94AE",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u5E26\u6309\u94AE"]}),`
`,(0,e.jsxs)(r,{name:"textarea-with-button",description:"\u4E00\u4E2A\u5E26\u6309\u94AE\u7684\u6587\u672C\u533A\u57DF",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}
`,__src__:"registry/new-york/examples/textarea-with-button.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaWithButton"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Send message</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

export function TextareaWithButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  )
}
`,__src__:"registry/default/examples/textarea-with-button.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaWithButton"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"grid w-full gap-2"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Type your message here."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Send message</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),`
`,(0,e.jsxs)(l.h3,{id:"\u8868\u5355",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u8868\u5355",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u8868\u5355"]}),`
`,(0,e.jsxs)(r,{name:"textarea-form",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.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 { toast } from "@/components/hooks/use-toast"
import { Button } from "@/components/ui/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form"
import { Textarea } from "@/components/ui/textarea"

const FormSchema = z.object({
  bio: z
    .string()
    .min(10, {
      message: "Bio must be at least 10 characters.",
    })
    .max(160, {
      message: "Bio must not be longer than 30 characters.",
    }),
})

export function TextareaForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })

function onSubmit(data: z.infer<typeof FormSchema>) {
    toast({
      title: "You submitted the following values:",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    })
  }

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
        <FormField
          control={form.control}
          name="bio"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Bio</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Tell us a little bit about yourself"
                  className="resize-none"
                  {...field}
                />
              </FormControl>
              <FormDescription>
                You can <span>@mention</span> other users and organizations.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}
`,__src__:"registry/new-york/examples/textarea-form.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { zodResolver } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@hookform/resolvers/zod"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useForm } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react-hook-form"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  Form,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormControl,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormDescription,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormField,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormItem,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormLabel,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormMessage,"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/form"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  bio: z"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    ."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    ."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Bio must be at least 10 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    })"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    ."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"max"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"160"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Bio must not be longer than 30 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    }),"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaForm"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" form"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useForm"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormSchema>>({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    resolver: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(FormSchema),"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  })"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormSchema>) {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"    toast"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      title: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"      description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}</"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      ),"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    })"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"form}>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{form."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(onSubmit)} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormField"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"          control"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"          name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"bio"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"          render"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Bio</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"                  placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Tell us a little bit about yourself"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"                  className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"resize-none"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                  {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"field}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                You can <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">@mention</"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> other users and organizations."})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Submit</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.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"

export function TextareaForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })

return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">
        <FormField
          control={form.control}
          name="bio"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Bio</FormLabel>
              <FormControl>
                <Textarea
                  placeholder="Tell us a little bit about yourself"
                  className="resize-none"
                  {...field}
                />
              </FormControl>
              <FormDescription>
                You can <span>@mention</span> other users and organizations.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}
`,__src__:"registry/default/examples/textarea-form.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"use client"'})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { zodResolver } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@hookform/resolvers/zod"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { useForm } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react-hook-form"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "zod"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/hooks/use-toast"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/button"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  Form,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormControl,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormDescription,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormField,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormItem,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormLabel,"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  FormMessage,"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/form"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { Textarea } "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/components/ui/textarea"'})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  bio: z"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    ."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"()"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    ."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"min"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Bio must be at least 10 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    })"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    ."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"max"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"160"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      message: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Bio must not be longer than 30 characters."'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    }),"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"})"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" TextareaForm"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"() {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  const"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:" form"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" useForm"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormSchema>>({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    resolver: "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(FormSchema),"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  })"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  function"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" FormSchema>) {"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"    toast"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      title: "}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:","})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"      description"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:": ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}</"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      ),"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    })"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  }"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:" "}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"  return"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"form}>"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{form."}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(onSubmit)} "}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"w-2/3 space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormField"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"          control"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{form.control}"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"          name"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"bio"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"          render"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{({ "}),(0,e.jsx)(l.span,{style:{color:"#FFAB70"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Bio</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Textarea"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"                  placeholder"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"Tell us a little bit about yourself"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:"                  className"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"resize-none"'})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                  {"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"field}"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"                You can <"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">@mention</"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"span"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> other users and organizations."})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"              <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormMessage"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:" />"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"            </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"          )}"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        />"})}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"        <"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#B392F0"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">Submit</"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"      </"}),(0,e.jsx)(l.span,{style:{color:"#85E89D"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"    </"}),(0,e.jsx)(l.span,{style:{color:"#79B8FF"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"  )"})}),`
`,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})}function u(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(F,{...n})}):F(n)}function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(v);})();
;return Component;</article></body></html>

文本区域

安装

使用

示例

默认

禁用

带标签

带文本

带按钮

表单