Checkbox

Forms

About

A native checkbox input with a custom-drawn box, check mark and indeterminate state, for toggling a single option in forms and lists.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Checkbox to your project and fits it to your theme.

Code

How Checkbox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Checkbox from "@/components/ui/checkbox";
import { Surface } from "@/components/ui/checkbox-utils/surface";
import { Text } from "@/components/ui/checkbox-utils/text";
import { useState } from "react";

const CATEGORIES = ["Subscriptions", "Transfers", "Cashback", "Bills"];

export default function CheckboxDemo() {
  const [selected, setSelected] = useState<string[]>(["Subscriptions"]);
  const allSelected = selected.length === CATEGORIES.length;
  const someSelected = selected.length > 0 && !allSelected;

  return (
    <div className="flex w-full items-center justify-center p-10">
      <Surface
        variant="card"
        padding="lg"
        className="w-full max-w-[320px] gap-3"
      >
        <label className="flex cursor-pointer items-center gap-2.5">
          <Checkbox
            checked={allSelected}
            indeterminate={someSelected}
            onChange={(event) =>
              setSelected(event.target.checked ? [...CATEGORIES] : [])
            }
          />
          <Text as="span" size="body">
            All categories
          </Text>
          <Text as="span" size="caption" tone="faint" className="ml-auto">
            {selected.length}/{CATEGORIES.length}
          </Text>
        </label>
        <div className="flex flex-col gap-2.5 border-t border-line pt-3">
          {CATEGORIES.map((category) => (
            <label
              key={category}
              className="flex cursor-pointer items-center gap-2.5"
            >
              <Checkbox
                boxSize="sm"
                checked={selected.includes(category)}
                onChange={(event) =>
                  setSelected((previous) =>
                    event.target.checked
                      ? [...previous, category]
                      : previous.filter((item) => item !== category),
                  )
                }
              />
              <Text as="span" size="label" weight="semibold" tone="soft">
                {category}
              </Text>
            </label>
          ))}
        </div>
      </Surface>
    </div>
  );
}