import React from 'react'
import { Checkbox } from "@/components/ui/checkbox";


const DefaultCheckCode = () => {
  return (
    <>
      <div className="flex flex-col gap-3 mt-4">
        <div className="flex items-center space-x-2">
          <Checkbox id="terms11" checked />
          <label htmlFor="terms11" className="text-ld text-sm">
            Accept terms and conditions
          </label>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox id="privacy22" checked />
          <label htmlFor="privacy22" className="text-ld text-sm">
            Accept privacy policy
          </label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox id="continue33" checked />
          <label htmlFor="continue33" className="text-ld text-sm">
             Continue to process?
          </label>
        </div>
      </div>
    </>
  )
}

export default DefaultCheckCode

import React from 'react'
import { Checkbox } from "@/components/ui/checkbox";


const CheckboxLabelCode = () => {
  return (
    <>
      <div className="flex flex-col gap-3 mt-4">
        <div className="flex items-center space-x-2">
          <Checkbox id="terms" />
          <label htmlFor="terms" className="text-ld text-sm">
            Accept terms and conditions
          </label>
        </div>

        <div className="flex items-center space-x-2">
          <Checkbox id="privacy" />
          <label htmlFor="privacy" className="text-ld text-sm">
            Accept privacy policy
          </label>
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox id="continue" />
          <label htmlFor="continue" className="text-ld text-sm">
             Continue to process?
          </label>
        </div>
      </div>
    </>
  )
}

export default CheckboxLabelCode

import React from 'react'
import { Checkbox } from '@/components/ui/checkbox'

const DisabledCheckCode = () => {
  return (
    <>
      <div className='flex flex-col gap-3 mt-4'>
        <div className='flex items-center space-x-2'>
          <Checkbox id='terms1' disabled />
          <label htmlFor='terms1' className='text-ld text-sm'>
            Accept terms and conditions
          </label>
        </div>

        <div className='flex items-center space-x-2'>
          <Checkbox id='privacy2' disabled />
          <label htmlFor='privacy2' className='text-ld text-sm'>
            Accept privacy policy
          </label>
        </div>
        <div className='flex items-center space-x-2'>
          <Checkbox id='continue3' disabled />
          <label htmlFor='continue3' className='text-ld text-sm'>
            Continue to process?
          </label>
        </div>
      </div>
    </>
  )
}

export default DisabledCheckCode

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { toast } from '@/app/hooks/use-toast'
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.',
  }),
})

const FormCheckboxCode = () => {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      items: ['recents', 'home'],
    },
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast({
      title: 'You submitted the following values:',
      description: (
        <pre className='mt-2 w-[340px] rounded-md bg-slate-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'>
                  <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-start space-x-3 space-y-0'>
                          <FormControl>
                            <Checkbox
                              checked={field.value?.includes(item.id)}
                              onCheckedChange={(checked: any) => {
                                return checked
                                  ? field.onChange([...field.value, item.id])
                                  : field.onChange(
                                      field.value?.filter(
                                        (value) => value !== item.id
                                      )
                                    )
                              }}
                            />
                          </FormControl>
                          <FormLabel className='font-normal'>
                            {item.label}
                          </FormLabel>
                        </FormItem>
                      )
                    }}
                  />
                ))}
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type='submit'>Submit</Button>
        </form>
      </Form>
    </>
  )
}

export default FormCheckboxCode

'use client'

import { Checkbox } from '@/components/ui/checkbox'

const CheckboxWithTextCode = () => {
  return (
    <>
      <div className='flex flex-col gap-4'>
        <div className='flex items-center space-x-2'>
          <Checkbox id='term' />
          <div>
            <label htmlFor='term' className='text-ld text-sm'>
              Accept terms and conditions
            </label>
            <p className='text-sm'>
              You agree to our Terms of Service and Privacy Policy.
            </p>
          </div>
        </div>

        <div className='items-center flex space-x-2'>
          <Checkbox id='privacy2' />
          <div>
            <label htmlFor='privacy2' className='text-ld text-sm'>
              Accept privacy policy
            </label>
            <p className='text-sm'>
              You agree to our Terms of Service and Privacy Policy.
            </p>
          </div>
        </div>
        <div className='items-center flex space-x-2'>
          <Checkbox id='continue3' />
          <div>
            <label htmlFor='continue3' className='text-ld text-sm'>
              Continue to process?
            </label>
            <p className='text-sm'>
              You agree to our Terms of Service and Privacy Policy.
            </p>
          </div>
        </div>
        <div className='items-center flex space-x-2'>
          <Checkbox id='act3' />
          <div>
            <label htmlFor='act3' className='text-ld text-sm'>
              Accept terms
            </label>
            <p className='text-sm'>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry&apos;s standard dummy
              text ever since the 1500s,
            </p>
          </div>
        </div>
      </div>
    </>
  )
}

export default CheckboxWithTextCode