Airplane Mode

) } `,__src__:"registry/default/example/switch-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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Label "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SwitchDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex items-center space-x-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch id"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Airplane Mode"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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 { Switch } from "@/components/ui/switch" export function SwitchDemo() { return (

Airplane Mode

) } `,__src__:"registry/new-york/example/switch-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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Label "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SwitchDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex items-center space-x-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch id"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Airplane Mode"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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)(F,{defaultValue:"cli",children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"\u624B\u52A8"})]}),(0,e.jsx)(t,{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-ui@latest add switch `,__npmCommand__:`npx shadcn-ui@latest add switch `,__yarnCommand__:`npx shadcn-ui@latest add switch `,__pnpmCommand__:`pnpm dlx shadcn-ui@latest add switch `,__bunCommand__:`bunx --bun shadcn-ui@latest add switch `,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:"#FFF",fontWeight:"bold"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" shadcn-ui@latest"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" switch"})]})})})})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(d,{children:[(0,e.jsx)(o,{children:"\u5B89\u88C5\u4EE5\u4E0B\u4F9D\u8D56\u9879\uFF1A"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-switch `,__npmCommand__:`npm install @radix-ui/react-switch `,__yarnCommand__:`yarn add @radix-ui/react-switch `,__pnpmCommand__:`pnpm add @radix-ui/react-switch `,__bunCommand__:`bun add @radix-ui/react-switch `,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:"#FFF",fontWeight:"bold"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" @radix-ui/react-switch"})]})})})}),(0,e.jsx)(o,{children:"\u5C06\u4EE5\u4E0B\u4EE3\u7801\u590D\u5236\u5E76\u7C98\u8D34\u5230\u60A8\u7684\u9879\u76EE\u4E2D\u3002"}),(0,e.jsxs)(h,{name:"switch",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 * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } `,__src__:"registry/default/ui/switch.tsx",__style__:"default",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:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" SwitchPrimitives "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@radix-ui/react-switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"SwitchPrimitives.Root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"SwitchPrimitives.Thumb"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" SwitchPrimitives"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Root"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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 * as React from "react" import * as SwitchPrimitives from "@radix-ui/react-switch" import { cn } from "@/lib/utils" const Switch = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Switch.displayName = SwitchPrimitives.Root.displayName export { Switch } `,__src__:"registry/new-york/ui/switch.tsx",__style__:"new-york",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:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" SwitchPrimitives "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@radix-ui/react-switch"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"},"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"SwitchPrimitives.Root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"SwitchPrimitives.Thumb"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"'})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" SwitchPrimitives"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Root"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]})]})})})]}),(0,e.jsx)(o,{children:"\u6839\u636E\u60A8\u7684\u9879\u76EE\u8BBE\u7F6E\u66F4\u65B0 import \u8DEF\u5F84\u3002"})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"\u7528\u6CD5",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u7528\u6CD5",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"\u7528\u6CD5"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Switch } from "@/components/ui/switch" `,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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/switch"'})]})})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,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:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"\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)(s,{name:"switch-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 { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, } from "@/components/ui/form" import { Switch } from "@/components/ui/switch" import { toast } from "@/components/ui/use-toast" const FormSchema = z.object({ marketing_emails: z.boolean().default(false).optional(), security_emails: z.boolean(), }) export function SwitchForm() { const form = useForm>({ resolver: zodResolver(FormSchema), defaultValues: { security_emails: true, }, }) function onSubmit(data: z.infer) { toast({ title: "You submitted the following values:", description: (

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

), }) } return ( ) } `,__src__:"registry/default/example/switch-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:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" zodResolver "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@hookform/resolvers/zod"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useForm "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react-hook-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormControl"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormField"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormItem"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/switch"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" toast "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/use-toast"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormSchema "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" marketing_emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"optional"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" security_emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SwitchForm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" form "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useForm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" resolver"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" defaultValues"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" security_emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" true,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"pre className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"code className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" null,"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 2)}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Form "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"h3 className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mb-4 text-lg font-medium"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Email Notifications"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"space-y-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"marketing_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" field "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormItem className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-row items-center justify-between rounded-lg border p-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormLabel className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-base"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Marketing emails"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Receive emails about new products, features, and more."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"security_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" field "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormItem className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-row items-center justify-between rounded-lg border p-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormLabel className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-base"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Security emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Receive emails about your account security."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" aria-readonly"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Button type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Submit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},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 { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, } from "@/components/ui/form" import { Switch } from "@/components/ui/switch" import { toast } from "@/components/ui/use-toast" const FormSchema = z.object({ marketing_emails: z.boolean().default(false).optional(), security_emails: z.boolean(), }) export function SwitchForm() { const form = useForm>({ resolver: zodResolver(FormSchema), defaultValues: { security_emails: true, }, }) function onSubmit(data: z.infer) { toast({ title: "You submitted the following values:", description: (

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

), }) } return ( ) } `,__src__:"registry/new-york/example/switch-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:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" zodResolver "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@hookform/resolvers/zod"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useForm "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react-hook-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},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:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Button "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormControl"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormField"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormItem"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Switch "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/switch"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" toast "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/use-toast"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" FormSchema "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" marketing_emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false)."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"optional"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" security_emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SwitchForm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" form "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useForm"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" resolver"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" defaultValues"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" security_emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" true,"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"pre className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"code className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">{"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" null,"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" 2)}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Form "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"{..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"h3 className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mb-4 text-lg font-medium"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Email Notifications"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"space-y-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"marketing_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" field "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormItem className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Marketing emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Receive emails about new products, features, and more."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"control"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"security_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={({"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" field "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormItem className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Security emails"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Receive emails about your account security."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"onChange"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" aria-readonly"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Button type"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Submit"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})]})]})}function C(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(u,n)})):u(n)}var R=C;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 x(z);})(); ;return Component;

开关

安装

用法

示例

表单

Email Notifications