Checkbox

A control that allows the user to toggle between checked and not checked.

Preview

Accept terms and conditions

Code

'use client'

import Checkbox from '@dinui/react/checkbox'

export default function CheckboxDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" className="peer" />
      <label
        htmlFor="terms"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  )
}

Size

Preview

Code

'use client'

import Checkbox from '@dinui/react/checkbox'

export default function CheckboxSizeDemo() {
  return (
    <div className="flex items-center gap-6">
      <Checkbox size="sm" />
      <Checkbox size="md" />
      <Checkbox size="lg" />
    </div>
  )
}

Disabled

Preview

Accept terms and conditions

Code

import Checkbox from '@dinui/react/checkbox'

export default function CheckboxDisabledDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms2" disabled />
      <label
        htmlFor="terms2"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  )
}

Form

Preview

Sidebar

Select the items you want to display in the sidebar.

Recents

Home

Applications

Desktop

Downloads

Documents

Submit

Code

'use client'

import Button from '@dinui/react/button'
import Checkbox from '@dinui/react/checkbox'
import Form, { useForm } from '@dinui/react/form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

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 default function CheckboxReactHookFormMultipleDemo() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      items: ['recents', 'home'],
    },
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    alert(`You submitted the following values: ${JSON.stringify(data, null, 2)}`)
  }

  return (
    <Form form={form} onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
      <Form.Field
        control={form.control}
        name="items"
        render={() => (
          <Form.Item>
            <div className="mb-4">
              <Form.Label className="text-base">Sidebar</Form.Label>
              <Form.Description>
                Select the items you want to display in the sidebar.
              </Form.Description>
            </div>
            {items.map((item) => (
              <Form.Field
                key={item.id}
                control={form.control}
                name="items"
                render={({ field }) => {
                  return (
                    <Form.Item
                      key={item.id}
                      className="flex flex-row items-start space-x-3 space-y-0"
                    >
                      <Form.Control>
                        <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))
                          }}
                        />
                      </Form.Control>
                      <Form.Label className="text-sm font-normal">{item.label}</Form.Label>
                    </Form.Item>
                  )
                }}
              />
            ))}

            <Form.ErrorMessage />
          </Form.Item>
        )}
      />

      <Button type="submit">Submit</Button>
    </Form>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add checkbox

   yarn

   yarn dlx @dinui/cli@latest add checkbox

   pnpm

   pnpm dlx @dinui/cli@latest add checkbox

   bun

   bunx @dinui/cli@latest add checkbox

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-checkbox @tabler/icons-react tailwind-variants tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-checkbox @tabler/icons-react tailwind-variants tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-checkbox @tabler/icons-react tailwind-variants tailwind-variants type-fest

   bun

   bun add @radix-ui/react-checkbox @tabler/icons-react tailwind-variants tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
   import { IconCheck } from '@tabler/icons-react'
   import { forwardRef } from 'react'
   import type { VariantProps } from 'tailwind-variants'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const checkbox = tv({
     slots: {
       root: [
         'transition duration-100',
         'shrink-0 rounded border border-fg-weaker',
         'data-[state=checked]:bg-brand data-[state=checked]:border-bg',
         'disabled:cursor-not-allowed disabled:opacity-50',
       ],
       indicatorIcon: null,
     },
     variants: {
       size: {
         sm: {
           root: 'size-3',
           indicatorIcon: 'size-2.5',
         },
         md: {
           root: 'size-4',
           indicatorIcon: 'size-[0.875rem]',
         },
         lg: {
           root: 'size-5',
           indicatorIcon: 'size-[1.125rem]',
         },
       },
     },
     defaultVariants: {
       size: 'md',
     },
   })
   
   const Checkbox = forwardRef<
     React.ElementRef<typeof CheckboxPrimitive.Root>,
     Merge<
       Merge<
         React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
         VariantProps<typeof checkbox>
       >,
       {
         indicatorIconProps?: React.ComponentProps<typeof IconCheck>
       }
     >
   >(({ indicatorIconProps, size, ...props }, ref) => {
     const { root, indicatorIcon } = checkbox({ size })
   
     return (
       <CheckboxPrimitive.Root {...props} ref={ref} className={root({ className: props.className })}>
         <CheckboxPrimitive.Indicator asChild>
           <IconCheck
             {...indicatorIconProps}
             className={indicatorIcon({ className: indicatorIconProps?.className })}
           />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
     )
   })
   Checkbox.displayName = CheckboxPrimitive.Root.displayName
   
   export default Checkbox
   export { checkbox, CheckboxPrimitive }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.