Airplane Mode

) } `,__src__:"registry/new-york/examples/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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/label"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" SwitchDemo"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center space-x-2"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Airplane Mode"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},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/default/examples/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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Label } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/label"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" SwitchDemo"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex items-center space-x-2"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" id"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Label"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" htmlFor"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"airplane-mode"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Airplane Mode"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(s,{children:[(0,e.jsxs)(p,{children:[(0,e.jsx)(d,{value:"cli",children:"CLI"}),(0,e.jsx)(d,{value:"manual",children:"Manual"})]}),(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@latest add switch `,__npmCommand__:`npx shadcn@latest add switch `,__yarnCommand__:`npx shadcn@latest add switch `,__pnpmCommand__:`pnpm dlx shadcn@latest add switch `,__bunCommand__:`bunx --bun shadcn@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:"#FFA657"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" switch"})]})})})})}),(0,e.jsx)(t,{value:"manual",children:(0,e.jsxs)(h,{children:[(0,e.jsx)(a,{children:"Install the following dependencies:"}),(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:"#FFA657"},children:"npm"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" install"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:" @radix-ui/react-switch"})]})})})}),(0,e.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,e.jsxs)(r,{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/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:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" SwitchPrimitives "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" Switch"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SwitchPrimitives.Root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SwitchPrimitives.Thumb"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"Switch.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" SwitchPrimitives.Root.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch }"})]})]})})}),(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:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" *"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" as"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" SwitchPrimitives "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" Switch"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SwitchPrimitives.Root"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" className"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"SwitchPrimitives.Thumb"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"Switch.displayName "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" SwitchPrimitives.Root.displayName"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch }"})]})]})})})]}),(0,e.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"examples",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,e.jsxs)(l.h3,{id:"form",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#form",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Form"]}),` `,(0,e.jsxs)(o,{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 { toast } from "@/components/hooks/use-toast" import { Button } from "@/components/ui/button" import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, } from "@/components/ui/form" import { Switch } from "@/components/ui/switch" 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/examples/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:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { zodResolver } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@hookform/resolvers/zod"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { useForm } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react-hook-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Form,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormControl,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormDescription,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormField,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormItem,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormLabel,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" marketing_emails: z."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"optional"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" security_emails: z."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"})"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" SwitchForm"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" form"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" useForm"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormSchema>>({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" resolver: "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(FormSchema),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" defaultValues: {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" security_emails: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormSchema>) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:": ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(onSubmit)"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"h3"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mb-4 text-lg font-medium"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Email Notifications"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-4"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form.control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"marketing_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Marketing emails"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Receive emails about new products, features, and more."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.onChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form.control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"security_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Security emails"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Receive emails about your account security."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.onChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" disabled"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" aria-readonly"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Submit"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},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, } from "@/components/ui/form" import { Switch } from "@/components/ui/switch" 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/examples/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:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { zodResolver } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@hookform/resolvers/zod"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { useForm } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "react-hook-form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { z } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { toast } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/hooks/use-toast"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Button } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/button"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Form,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormControl,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormDescription,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormField,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormItem,"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormLabel,"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"} "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/form"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" { Switch } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},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:"#FF7B72"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" FormSchema"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" z."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"object"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" marketing_emails: z."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"()."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"default"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"false"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:")."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"optional"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(),"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" security_emails: z."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"boolean"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"})"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" SwitchForm"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" form"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" useForm"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"z"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormSchema>>({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" resolver: "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"zodResolver"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(FormSchema),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" defaultValues: {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" security_emails: "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"true"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:" z"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"infer"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"typeof"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" FormSchema>) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" toast"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" title: "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"You submitted the following values:"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:" description"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:": ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"pre"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mt-2 w-[340px] rounded-md bg-slate-950 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-white"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"JSON"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"stringify"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(data, "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"2"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:""})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ),"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" })"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Form"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:" {..."}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"form"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" onSubmit"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form."}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"handleSubmit"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"(onSubmit)"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"w-full space-y-6"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"h3"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"mb-4 text-lg font-medium"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Email Notifications"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-4"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form.control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"marketing_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-row items-center justify-between rounded-lg border p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-base"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Marketing emails"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Receive emails about new products, features, and more."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.onChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormField"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"form.control"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" name"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"security_emails"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" render"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#FFA657"},children:"field"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" }) "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormItem"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"flex flex-row items-center justify-between rounded-lg border p-4"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"space-y-0.5"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormLabel"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"text-base"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Security emails"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormDescription"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" Receive emails about your account security."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"FormControl"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Switch"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" checked"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" onCheckedChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"field.onChange"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" disabled"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" aria-readonly"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Button"}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:" type"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"submit"'}),(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:">Submit"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]})]})}function D(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(m,{...n})}):m(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(A);})(); ;return Component;

开关

安装

用法

示例

表单

邮件通知