Checkbox

<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
  import { Label } from "$lib/components/ui/label/index.js";
</script>
 
<div class="flex flex-col gap-6">
  <div class="flex items-center gap-3">
    <Checkbox id="terms" />
    <Label for="terms">Accept terms and conditions</Label>
  </div>
  <div class="flex items-start gap-3">
    <Checkbox id="terms-2" checked />
    <div class="grid gap-2">
      <Label for="terms-2">Accept terms and conditions</Label>
      <p class="text-muted-foreground text-sm">
        By clicking this checkbox, you agree to the terms and conditions.
      </p>
    </div>
  </div>
  <div class="flex items-start gap-3">
    <Checkbox id="toggle" disabled />
    <Label for="toggle">Enable notifications</Label>
  </div>
  <Label
    class="hover:bg-accent/50 flex items-start gap-3 rounded-lg border p-3 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
  >
    <Checkbox
      id="toggle-2"
      checked
      class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
    />
    <div class="grid gap-1.5 font-normal">
      <p class="text-sm font-medium leading-none">Enable notifications</p>
      <p class="text-muted-foreground text-sm">
        You can enable or disable notifications at any time.
      </p>
    </div>
  </Label>
</div>

<script lang="ts" module>
  import { z } from "zod/v4";
 
  const items = [
    {
      id: "recents",
      label: "Recents"
    },
    {
      id: "home",
      label: "Home"
    },
    {
      id: "applications",
      label: "Applications"
    },
    {
      id: "desktop",
      label: "Desktop"
    },
    {
      id: "downloads",
      label: "Downloads"
    },
    {
      id: "documents",
      label: "Documents"
    }
  ] as const;
 
  const formSchema = z.object({
    items: z.array(z.string()).refine((value) => value.some((item) => item), {
      message: "You have to select at least one item."
    })
  });
</script>
 
<script lang="ts">
  import { defaults, superForm } from "sveltekit-superforms";
  import { zod4 } from "sveltekit-superforms/adapters";
  import { toast } from "svelte-sonner";
  import * as Form from "$lib/components/ui/form/index.js";
  import { Checkbox } from "$lib/components/ui/checkbox/index.js";
 
  const form = superForm(defaults(zod4(formSchema)), {
    SPA: true,
    validators: zod4(formSchema),
    onUpdate: ({ form: f }) => {
      if (f.valid) {
        toast.success(`You submitted ${JSON.stringify(f.data, null, 2)}`);
      } else {
        toast.error("Please fix the errors in the form.");
      }
    }
  });
 
  const { form: formData, enhance } = form;
 
  function addItem(id: string) {
    $formData.items = [...$formData.items, id];
  }
 
  function removeItem(id: string) {
    $formData.items = $formData.items.filter((i) => i !== id);
  }
</script>
 
<form method="POST" class="space-y-8" use:enhance>
  <Form.Fieldset {form} name="items" class="space-y-0">
    <div class="mb-4">
      <Form.Legend class="text-base">Sidebar</Form.Legend>
      <Form.Description>
        Select the items you want to display in the sidebar.
      </Form.Description>
    </div>
    <div class="space-y-2">
      {#each items as item (item.id)}
        {@const checked = $formData.items.includes(item.id)}
        <div class="flex flex-row items-start space-x-3">
          <Form.Control>
            {#snippet children({ props })}
              <Checkbox
                {...props}
                {checked}
                value={item.id}
                onCheckedChange={(v) => {
                  if (v) {
                    addItem(item.id);
                  } else {
                    removeItem(item.id);
                  }
                }}
              />
              <Form.Label class="font-normal">
                {item.label}
              </Form.Label>
            {/snippet}
          </Form.Control>
        </div>
      {/each}
      <Form.FieldErrors />
    </div>
  </Form.Fieldset>
  <Form.Button>Update display</Form.Button>
</form>