Accept terms and conditions

) } `,__src__:"registry/default/example/checkbox-demo.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Checkbox "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/checkbox"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Label "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" CheckboxDemo"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"flex items-center space-x-2"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Checkbox id"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"terms"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"terms"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Accept terms and conditions"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(e.h2,{id:"examples",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,n.jsxs)(e.h3,{id:"with-text",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#with-text",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"With text"]}),` `,(0,n.jsx)(s,{name:"checkbox-with-text",description:"A checkbox with label and description.",children:(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label" export function CheckboxWithText() { return (

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.

) } `,__src__:"registry/default/example/checkbox-with-text.tsx",children:(0,n.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"use client"'})}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Checkbox "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/checkbox"'})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" Label "}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:' "@/components/ui/label"'})]}),` `,(0,n.jsx)(e.span,{className:"line",children:" "}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(e.span,{style:{color:"#FFF",fontWeight:"bold"},children:" CheckboxWithText"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"items-top flex space-x-2"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Checkbox id"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"terms1"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"space-y-1"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Label htmlFor"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"terms1"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"Accept terms and conditions"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:""})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#FFF"},children:"p className"}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:'"text-base text-secondary"'}),(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF"},children:" You agree to our Terms of Service and Privacy Policy."})}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(e.span,{className:"line",children:[(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:" )"})}),` `,(0,n.jsx)(e.span,{className:"line",children:(0,n.jsx)(e.span,{style:{color:"#FFF8"},children:"}"})})]})})})})]})}function k(l={}){let{wrapper:e}=l.components||{};return e?(0,n.jsx)(e,Object.assign({},l,{children:(0,n.jsx)(t,l)})):t(l)}var g=k;function v(l,e){throw new Error("Expected "+(e?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}return N(_);})(); ;return Component;