Checkbox

A standalone checkbox with label and optional description text — built with Tailwind CSS.

Preview

Basic checkbox

import { Checkbox } from '@/registry/ui-kit/tailwind-checkbox/react'

function Example() {
  return <Checkbox label="Accept terms" />
}

With description

import { Checkbox } from '@/registry/ui-kit/tailwind-checkbox/react'

function Example() {
  return (
    <Checkbox
      label="Email notifications"
      description="Receive email updates about your account."
    />
  )
}

Disabled

import { Checkbox } from '@/registry/ui-kit/tailwind-checkbox/react'

function Example() {
  return <Checkbox label="Disabled" disabled />
}

Component API

Prop	Default	Description
`label`	`—`	Text label displayed next to the checkbox.
`description`	`—`	Optional helper text below the label.
`className`	`""`	Additional CSS classes to apply.

Source Code

"use client";

import { forwardRef } from "react";

interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
  label: string;
  description?: string;
  className?: string;
}

const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
  ({ label, description, className = "", ...props }, ref) => {
    return (
      <label className={`flex items-start gap-3 ${className}`}>
        <input
          ref={ref}
          type="checkbox"
          className="h-4 w-4 shrink-0 cursor-pointer rounded border-zinc-300 text-indigo-600 focus:ring-indigo-500/20 dark:border-zinc-600 dark:bg-zinc-900"
          {...props}
        />
        <span className="select-none">
          <span className="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
            {label}
          </span>
          {description && (
            <span className="block text-sm text-zinc-500 dark:text-zinc-400">
              {description}
            </span>
          )}
        </span>
      </label>
    );
  }
);
Checkbox.displayName = "Checkbox";

export { Checkbox };
export default Checkbox;