Creative Tim UICreative Tim UI

Shadcn Checkbox

PreviousNext

A control that allows users to toggle between checked and unchecked states, commonly used in forms and settings.

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

export function CheckboxDemo() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Checkbox id="default-checkbox" />
        <label
          htmlFor="default-checkbox"
          className="text-foreground cursor-pointer text-sm"
        >
          Default Checkbox
        </label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="checked-checkbox" />
        <label
          htmlFor="checked-checkbox"
          className="text-foreground cursor-pointer text-sm"
        >
          Checked Checkbox
        </label>
      </div>
    </div>
  )
}

Installation

pnpm dlx @creative-tim/ui@latest add checkbox

Usage

import { Checkbox } from "@/components/ui/checkbox"
 
export default function MyCheckbox() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="terms" />
      <label htmlFor="terms" className="cursor-pointer text-sm">
        Accept terms and conditions
      </label>
    </div>
  )
}

Examples

Checkbox Basic

Simple checkbox examples showing default and checked states.

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

export function CheckboxDemo() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Checkbox id="default-checkbox" />
        <label
          htmlFor="default-checkbox"
          className="text-foreground cursor-pointer text-sm"
        >
          Default Checkbox
        </label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox defaultChecked id="checked-checkbox" />
        <label
          htmlFor="checked-checkbox"
          className="text-foreground cursor-pointer text-sm"
        >
          Checked Checkbox
        </label>
      </div>
    </div>
  )
}

Checkbox with Label

A checkbox paired with a descriptive label for better usability.

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

export function CheckboxWithLabel() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="checkbox" />
      <label
        htmlFor="checkbox"
        className="text-foreground cursor-pointer text-sm"
      >
        Remember Me
      </label>
    </div>
  )
}

Checkbox with Description

Checkbox with a title and supporting description text for additional context.

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

export function CheckboxWithDescription() {
  return (
    <div className="flex gap-2">
      <Checkbox id="checkbox-description" className="mt-1" />
      <label
        htmlFor="checkbox-description"
        className="cursor-pointer space-y-0.5"
      >
        <div className="text-foreground text-sm font-semibold">Remember Me</div>
        <div className="text-muted-foreground text-xs">
          You&apos;ll be able to login without password for 24 hours.
        </div>
      </label>
    </div>
  )
}

Checkbox with Link

A checkbox with an inline link, commonly used for terms and conditions.

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

export function CheckboxWithLink() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="checkbox-link" />
      <label
        htmlFor="checkbox-link"
        className="text-foreground cursor-pointer text-sm"
      >
        I agree with the{" "}
        <a href="#" className="text-primary underline underline-offset-4">
          terms and conditions
        </a>
      </label>
    </div>
  )
}

Checkbox Colors

Checkbox components styled with different color variants.

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

export function CheckboxColors() {
  return (
    <div className="flex flex-wrap justify-center gap-4">
      <Checkbox
        defaultChecked
        className="data-[state=checked]:bg-primary data-[state=checked]:border-primary"
      />
      <Checkbox
        defaultChecked
        className="data-[state=checked]:bg-secondary data-[state=checked]:border-secondary"
      />
      <Checkbox
        defaultChecked
        className="data-[state=checked]:border-blue-500 data-[state=checked]:bg-blue-500"
      />
      <Checkbox
        defaultChecked
        className="data-[state=checked]:border-green-500 data-[state=checked]:bg-green-500"
      />
      <Checkbox
        defaultChecked
        className="data-[state=checked]:border-yellow-500 data-[state=checked]:bg-yellow-500"
      />
      <Checkbox
        defaultChecked
        className="data-[state=checked]:border-red-500 data-[state=checked]:bg-red-500"
      />
    </div>
  )
}

Checkbox Custom Icon

A checkbox using a custom star icon instead of the default checkmark.

"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Star } from "lucide-react"

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

export function CheckboxWithCustomIcon() {
  const [checked, setChecked] = React.useState(false)

  return (
    <CheckboxPrimitive.Root
      checked={checked}
      onCheckedChange={(value) => setChecked(value === true)}
      className={cn(
        "peer size-5 shrink-0 rounded-[4px] border-0 shadow-none transition-all outline-none hover:shadow-none focus-visible:ring-0 data-[state=checked]:bg-transparent"
      )}
    >
      <Star
        className={cn(
          "stroke-primary size-5 transition-all",
          checked ? "fill-primary" : "fill-transparent"
        )}
      />
    </CheckboxPrimitive.Root>
  )
}

Checkbox Disabled

Checkbox in disabled state, preventing user interaction.

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

export function CheckboxDisabled() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Checkbox disabled id="disabled-unchecked" />
        <label
          htmlFor="disabled-unchecked"
          className="text-muted-foreground cursor-not-allowed text-sm"
        >
          Disabled Unchecked
        </label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox disabled defaultChecked id="disabled-checked" />
        <label
          htmlFor="disabled-checked"
          className="text-muted-foreground cursor-not-allowed text-sm"
        >
          Disabled Checked
        </label>
      </div>
    </div>
  )
}

Component Structure

The checkbox component is built on Radix UI's Checkbox primitive and consists of:

  • Checkbox: The main checkbox control
  • CheckboxIndicator: Visual indicator shown when checked (contained within Radix UI)

API Reference

Checkbox

The checkbox component accepts the following props:

  • id: Unique identifier for the checkbox (for label association)
  • defaultChecked: Boolean to set initial checked state (default: false)
  • checked: Controlled checked state
  • onCheckedChange: Callback function when checked state changes
  • disabled: Boolean to disable the checkbox
  • required: Boolean to mark as required field
  • name: Name attribute for form submission
  • value: Value attribute for form submission
  • className: Additional CSS classes for custom styling
  • Accepts all standard Radix UI Checkbox.Root props

Styling

The checkbox component can be customized using Tailwind CSS classes:

// Custom color
<Checkbox className="data-[state=checked]:bg-blue-500 data-[state=checked]:border-blue-500" />
 
// Custom size
<Checkbox className="size-5" />
 
// Custom border radius
<Checkbox className="rounded-full" />

Accessibility

The checkbox component is built with accessibility in mind:

  • Uses Radix UI's accessible checkbox primitive
  • Supports keyboard navigation (Space to toggle)
  • Proper ARIA attributes for screen readers
  • Associated labels improve click target area
  • Clear visual states for checked/unchecked/disabled
  • Focus indicators for keyboard users

Best Practices

  1. Always Use Labels: Associate checkboxes with labels using the htmlFor attribute for better accessibility and larger click areas
  2. Provide Context: For important actions, include description text to clarify what the checkbox controls
  3. Group Related Items: Use fieldsets to group related checkboxes together
  4. Clear Language: Use clear, concise labels that describe what checking the box will do
  5. Visual Feedback: Ensure checked and unchecked states are visually distinct
  6. Keyboard Accessible: Test that checkboxes can be toggled using keyboard (Space bar)
  7. Form Integration: Use proper name and value attributes when using in forms