Docs
Checkbox

Checkbox

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

Installation

Copy and paste the following code into your project. 

"use client"

import * as React from "react"

import { Checkbox as CheckboxPrimitive } from "@ark-ui/react/checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = CheckboxPrimitive.Root

const CheckboxContext = CheckboxPrimitive.Context

const CheckboxTrigger = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Control>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Control>
>(({ className, children, ...props }, ref) => (
  <>
    <CheckboxPrimitive.Control
      ref={ref}
      className={cn(
        "peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-primary text-current ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled]:opacity-50",
        className
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator>
        <Check className="h-4 w-4" />
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Control>
    <CheckboxPrimitive.HiddenInput />
  </>
))
CheckboxTrigger.displayName = "CheckboxTrigger"

const CheckboxLabel = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Label>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Label>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Label
    ref={ref}
    className={cn(
      "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
      className
    )}
    {...props}
  />
))
CheckboxLabel.displayName = "CheckboxLabel"

export { Checkbox, CheckboxContext, CheckboxLabel, CheckboxTrigger }

CheckboxTrigger.vue

<script setup lang="ts">
import { cn } from "@/lib/utils"
import {
  CheckboxControl,
  type CheckboxControlProps,
  CheckboxHiddenInput,
  CheckboxIndicator,
} from "@ark-ui/vue/checkbox"
import { Check } from "lucide-vue-next"
import type { HTMLAttributes } from "vue"

const props = defineProps<
  CheckboxControlProps & { class?: HTMLAttributes["class"] }
>()
</script>

<template>
  <CheckboxControl
    v-bind="props"
    :class="cn('peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-sm border border-primary text-current ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[disabled]:opacity-50', props.class)"
  >
    <CheckboxIndicator>
      <Check class="h-4 w-4" />
    </CheckboxIndicator>
  </CheckboxControl>
  <CheckboxHiddenInput />
</template>

CheckboxLabel.vue

<script setup lang="ts">
import { cn } from "@/lib/utils"
import { CheckboxLabel, type CheckboxLabelProps } from "@ark-ui/vue/checkbox"
import type { HTMLAttributes } from "vue"

const props = defineProps<
  CheckboxLabelProps & { class?: HTMLAttributes["class"] }
>()
</script>

<template>
  <CheckboxLabel
     v-bind="props"
    :class="cn('data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70', props.class)"
  >
    <slot />
  </CheckboxLabel>
</template>

index.ts

export {
  CheckboxRoot as Checkbox,
  CheckboxContext,
} from "@ark-ui/vue/checkbox"
export { default as CheckboxTrigger } from "./CheckboxTrigger.vue"
export { default as CheckboxLabel } from "./CheckboxLabel.vue"

Update the import paths to match your project setup.

Usage 

import {
  Checkbox,
  CheckboxLabel,
  CheckboxTrigger,
} from "@/components/ui/checkbox"

<Checkbox>
  <CheckboxTrigger />
  <CheckboxLabel>Accept terms and conditions</CheckboxLabel>
</Checkbox>

Examples

With text

Disabled