Checkbox

1import { Checkbox } from "@/components/ui/checkbox"23export function CheckboxBasicDemo() {4  return (5    <div className="space-y-3">6      <div className="flex items-center space-x-2">7        <Checkbox />8        <span className="text-sm font-medium leading-none">9          Remember me10        </span>11      </div>12      <div className="flex items-center space-x-2">13        <Checkbox defaultChecked />14        <span className="text-sm font-medium leading-none">15          Subscribe to newsletter16        </span>17      </div>18      <div className="flex items-center space-x-2 opacity-50">19        <Checkbox disabled />20        <span className="text-sm font-medium leading-none">21          Unavailable option22        </span>23      </div>24    </div>25  )26}

1"use client"23import { createSignal } from "@barefootjs/dom"4import { Checkbox } from "@/components/ui/checkbox"56export function CheckboxTermsDemo() {7  const [accepted, setAccepted] = createSignal(false)89  const handleLabelClick = () => {10    setAccepted(!accepted())11  }1213  return (14    <div className="space-y-4">15      <div className="items-top flex space-x-2">16        <Checkbox checked={accepted()} onCheckedChange={setAccepted} />17        <div18          className="grid gap-1.5 leading-none cursor-pointer select-none"19          onClick={handleLabelClick}20        >21          <span className="text-sm font-medium leading-none">22            I agree to the terms and conditions23          </span>24          <p className="text-sm text-muted-foreground">25            By checking this box, you agree to our Terms of Service.26          </p>27        </div>28      </div>29      <button30        className="inline-flex items-center justify-center rounded-md text-sm font-medium h-9 px-4 py-2 bg-primary text-primary-foreground hover:bg-primary/90 disabled:pointer-events-none disabled:opacity-50"31        disabled={!accepted()}32      >33        Continue34      </button>35    </div>36  )37}

1"use client"23import { createSignal } from "@barefootjs/dom"4import { Checkbox } from "@/components/ui/checkbox"56export function CheckboxFormDemo() {7  const [mobile, setMobile] = createSignal(false)8  const [desktop, setDesktop] = createSignal(true)9  const [email, setEmail] = createSignal(false)1011  return (12    <div className="space-y-4">13      <div className="space-y-4">14        <h4 className="text-sm font-medium leading-none">Sidebar</h4>15        <p className="text-sm text-muted-foreground">16          Select the items you want to display in the sidebar.17        </p>18        <div className="flex flex-col space-y-3">19          <div className="flex items-center space-x-2">20            <Checkbox checked={mobile()} onCheckedChange={setMobile} />21            <span className="text-sm font-medium leading-none">Mobile</span>22          </div>23          <div className="flex items-center space-x-2">24            <Checkbox checked={desktop()} onCheckedChange={setDesktop} />25            <span className="text-sm font-medium leading-none">Desktop</span>26          </div>27          <div className="flex items-center space-x-2">28            <Checkbox checked={email()} onCheckedChange={setEmail} />29            <span className="text-sm font-medium leading-none">Email notifications</span>30          </div>31        </div>32      </div>33      <div className="text-sm text-muted-foreground pt-2 border-t">34        Selected: {[mobile() && 'Mobile', desktop() && 'Desktop', email() && 'Email']35          .filter(Boolean).join(', ') || 'None'}36      </div>37    </div>38  )39}

1"use client"23import { createSignal, createMemo } from "@barefootjs/dom"4import { Checkbox } from "@/components/ui/checkbox"56const emails = [7  { id: 0, from: 'John Smith', subject: 'Meeting tomorrow - Let\'s discuss the Q4 planning', time: '10:30 AM', unread: true },8  { id: 1, from: 'Dev Team', subject: 'Project update - Sprint review notes attached', time: '9:15 AM', unread: false },9  { id: 2, from: 'Billing Dept', subject: 'Invoice #1234 - Payment due in 30 days', time: 'Yesterday', unread: true },10]1112export function CheckboxEmailListDemo() {13  // Array-based state management with immutable updates14  const [checked, setChecked] = createSignal(emails.map(() => false))1516  const selectedCount = createMemo(() => checked().filter(Boolean).length)17  const isAllSelected = createMemo(() => selectedCount() === emails.length)18  const selectionLabel = createMemo(() =>19    selectedCount() > 0 ? \`\${selectedCount()} selected\` : 'Select all'20  )2122  // Immutable update pattern for toggling individual email23  const toggleEmail = (index: number) => {24    setChecked(prev => prev.map((v, i) => i === index ? !v : v))25  }2627  // Immutable update pattern for toggling all emails28  const toggleAll = (value: boolean) => {29    setChecked(prev => prev.map(() => value))30  }3132  return (33    <div className="w-full max-w-2xl">34      <div className="flex items-center justify-between px-3 py-2 border-b">35        <div className="flex items-center gap-3">36          <Checkbox checked={isAllSelected()} onCheckedChange={toggleAll} />37          <span className="text-sm text-muted-foreground">{selectionLabel()}</span>38        </div>39        {selectedCount() > 0 && (40          <span className="text-sm text-primary cursor-pointer hover:underline">41            Mark as read42          </span>43        )}44      </div>45      <div className="divide-y border-x border-b rounded-b-md">46        {emails.map((email) => (47          <div key={email.id} className="flex items-center gap-3 px-3 py-2 hover:bg-muted/50 cursor-pointer">48            <Checkbox checked={checked()[email.id]} onCheckedChange={() => toggleEmail(email.id)} />49            <span className={\`text-sm w-32 truncate \${email.unread ? 'font-medium' : ''}\`}>{email.from}</span>50            <span className={\`text-sm truncate flex-1 \${email.unread ? '' : 'text-muted-foreground'}\`}>{email.subject}</span>51            <span className="text-xs text-muted-foreground shrink-0">{email.time}</span>52          </div>53        ))}54      </div>55    </div>56  )57}