Icon choices

TS

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

Hero

TSX

import { IconCheckbox } from "@fungi.computer/caps/components/icon-checkbox";

export default function Hero() {
  return (
    <div className="flex flex-wrap gap-2">
      <IconCheckbox
        caption="Edible"
        defaultChecked
        icon={<span aria-hidden="true">🍄</span>}
        label="Edible"
        name="tags"
        value="edible"
      />
      <IconCheckbox
        caption="Toxic"
        icon={<span aria-hidden="true">☠️</span>}
        label="Toxic"
        name="tags"
        value="toxic"
      />
      <IconCheckbox
        caption="Medicinal"
        icon={<span aria-hidden="true">💊</span>}
        label="Medicinal"
        name="tags"
        value="medicinal"
      />
    </div>
  );
}

Interactive

TSX

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

const choices = [
  { id: "edible", label: "Edible", icon: "🍄" },
  { id: "toxic", label: "Toxic", icon: "☠️" },
  { id: "medicinal", label: "Medicinal", icon: "💊" },
];

export default function Interactive() {
  const [picked, setPicked] = useState<string[]>(["edible"]);
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap gap-2">
        {choices.map((choice) => (
          <IconCheckbox
            caption={choice.label}
            checked={picked.includes(choice.id)}
            icon={<span aria-hidden="true">{choice.icon}</span>}
            key={choice.id}
            label={choice.label}
            onChange={(event) => {
              setPicked((value) =>
                event.target.checked
                  ? [...value, choice.id]
                  : value.filter((item) => item !== choice.id),
              );
            }}
          />
        ))}
      </div>
      <p className="text-xs text-base-content">
        {picked.join(", ") || "None selected"}
      </p>
    </div>
  );
}

Props

IconCheckboxProps

Prop	Type	Description
label	string
icon	ReactNode
caption?	string	A short visible legend; it does not replace the accessible label.
appearance?	"default" | "compact"	Compact instruments show the icon and caption without a tile or lamp.

• labelstring
• iconReactNode
• caption?string

  A short visible legend; it does not replace the accessible label.

• appearance?"default" | "compact"

  Compact instruments show the icon and caption without a tile or lamp.

Full types: API reference.