Checkbox

TS

import { … } from "@fungi.computer/caps/components/checkbox";

Checklist

TSX

import { Checkbox } from "@fungi.computer/caps/components/checkbox";

export default function Checklist() {
  return (
    <div className="flex flex-col gap-2">
      <label className="flex items-center gap-2">
        <Checkbox defaultChecked name="gear" value="basket" />
        <span className="text-sm">Basket</span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox defaultChecked name="gear" value="knife" />
        <span className="text-sm">Foraging knife</span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox name="gear" value="spores" />
        <span className="text-sm">Spore print kit</span>
      </label>
    </div>
  );
}

States

TSX

import { Checkbox } from "@fungi.computer/caps/components/checkbox";

export default function States() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <label className="flex items-center gap-2">
        <Checkbox indeterminate name="all" />
        <span className="text-sm">Select all (mixed)</span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox defaultChecked invalid name="terms" />
        <span className="text-sm">Needs review</span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox disabled name="locked" />
        <span className="text-sm">Locked</span>
      </label>
    </div>
  );
}

Interactive

TSX

import { useState } from "react";
import { Checkbox } from "@fungi.computer/caps/components/checkbox";

const spots = ["Oak hollow", "Mossy ridge", "Creek bend"];

export default function Interactive() {
  const [picked, setPicked] = useState<string[]>([]);
  return (
    <div className="flex flex-col gap-2">
      {spots.map((spot) => (
        <label className="flex items-center gap-2" key={spot}>
          <Checkbox
            checked={picked.includes(spot)}
            onChange={(event) => {
              setPicked((value) =>
                event.target.checked
                  ? [...value, spot]
                  : value.filter((item) => item !== spot),
              );
            }}
          />
          <span className="text-sm">{spot}</span>
        </label>
      ))}
      <p className="text-xs text-base-content">{picked.length} spots picked</p>
    </div>
  );
}

Props

CheckboxProps

Prop	Type	Description
appearance?	"default" | "compact"	Compact instruments keep the wrapper's focus ring and disabled ink readable.
indicator?	ReactNode	Replaces the bead while the native input continues to own selection.
invalid?	boolean
indeterminate?	boolean	Shows a mixed selection while checked still controls native form submission.

• appearance?"default" | "compact"

  Compact instruments keep the wrapper's focus ring and disabled ink readable.

• indicator?ReactNode

  Replaces the bead while the native input continues to own selection.

• invalid?boolean
• indeterminate?boolean

  Shows a mixed selection while checked still controls native form submission.

Full types: API reference.