Checkbox · ascii-cn

Send me product updates

"use client";
import { Checkbox } from "@/components/ui/checkbox";

export function Demo() {
  return <Checkbox defaultChecked>Send me product updates</Checkbox>;
}

Installation

pnpm dlx shadcn@latest add https://ascii-cn.kdawg.dev/r/checkbox.json

Usage

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

components/ui/checkbox.tsx

import type { ComponentProps } from "react";
export function Checkbox({
  children,
  className = "",
  ...props
}: Omit<ComponentProps<"input">, "type">) {
  return (
    <label
      className={`inline-flex min-h-11 cursor-pointer items-center gap-3 font-mono text-sm text-[#ffd15b] ${className}`}
    >
      <input type="checkbox" className="peer sr-only" {...props} />
      <span
        aria-hidden="true"
        className="peer-focus-visible:outline-2 peer-focus-visible:outline-offset-4 peer-checked:hidden"
      >
        [ ]
      </span>
      <span
        aria-hidden="true"
        className="hidden peer-checked:inline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-4"
      >
        [x]
      </span>
      {children}
    </label>
  );
}

Styling

Edit the component's Tailwind classes directly. Blue marks interactive controls; yellow highlights attention or a build action. Keep visible text labels alongside color.