Checkbox

"use client"  import { Checkbox } from "@/components/ui/checkbox" import { Label } from "@/components/ui/label"  export function CheckboxDemo() {  return (  <div className="flex flex-col gap-6">  <div className="flex items-center gap-3">  <Checkbox id="terms" />  <Label htmlFor="terms">Accept terms and conditions</Label>  </div>  <div className="flex items-start gap-3">  <Checkbox id="terms-2" defaultChecked />  <div className="grid gap-2">  <Label htmlFor="terms-2">Accept terms and conditions</Label>  <p className="text-muted-foreground text-sm">  By clicking this checkbox, you agree to the terms and conditions.  </p>  </div>  </div>  <div className="flex items-start gap-3">  <Checkbox id="toggle" disabled />  <Label htmlFor="toggle">Enable notifications</Label>  </div>  <Label className="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"  defaultChecked  className="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 className="grid gap-1.5 font-normal">  <p className="text-sm leading-none font-medium">  Enable notifications  </p>  <p className="text-muted-foreground text-sm">  You can enable or disable notifications at any time.  </p>  </div>  </Label>  </div>  ) } 

"use client"  import { zodResolver } from "@hookform/resolvers/zod" import { useForm } from "react-hook-form" import { toast } from "sonner" import { z } from "zod"  import { Button } from "@/components/ui/button" import { Checkbox } from "@/components/ui/checkbox" import {  Form,  FormControl,  FormDescription,  FormField,  FormItem,  FormLabel,  FormMessage, } from "@/components/ui/form"  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.",  }), })  export function CheckboxReactHookFormMultiple() {  const form = useForm<z.infer<typeof FormSchema>>({  resolver: zodResolver(FormSchema),  defaultValues: {  items: ["recents", "home"],  },  })   function onSubmit(data: z.infer<typeof FormSchema>) {  toast("You submitted the following values", {  description: (  <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">  <code className="text-white">{JSON.stringify(data, null, 2)}</code>  </pre>  ),  })  }   return (  <Form {...form}>  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">  <FormField  control={form.control}  name="items"  render={() => (  <FormItem>  <div className="mb-4">  <FormLabel className="text-base">Sidebar</FormLabel>  <FormDescription>  Select the items you want to display in the sidebar.  </FormDescription>  </div>  {items.map((item) => (  <FormField  key={item.id}  control={form.control}  name="items"  render={({ field }) => {  return (  <FormItem  key={item.id}  className="flex flex-row items-center gap-2"  >  <FormControl>  <Checkbox  checked={field.value?.includes(item.id)}  onCheckedChange={(checked) => {  return checked  ? field.onChange([...field.value, item.id])  : field.onChange(  field.value?.filter(  (value) => value !== item.id  )  )  }}  />  </FormControl>  <FormLabel className="text-sm font-normal">  {item.label}  </FormLabel>  </FormItem>  )  }}  />  ))}  <FormMessage />  </FormItem>  )}  />  <Button type="submit">Submit</Button>  </form>  </Form>  ) }