Switch

TS

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

Hero

TSX

import { Switch } from "@fungi.computer/caps/components/switch";

export default function Hero() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <label className="flex items-center gap-2">
        <Switch defaultChecked />
        <span className="text-sm">Notifications</span>
      </label>
      <label className="flex items-center gap-2">
        <Switch />
        <span className="text-sm">Public profile</span>
      </label>
    </div>
  );
}

Interactive

TSX

import { useState } from "react";
import { Switch } from "@fungi.computer/caps/components/switch";

export default function Interactive() {
  const [tracking, setTracking] = useState(false);
  return (
    <label className="flex items-center gap-2">
      <Switch checked={tracking} onCheckedChange={setTracking} />
      <span className="text-sm">
        {tracking ? "Tracking this trail" : "Not tracking"}
      </span>
    </label>
  );
}

Props

SwitchProps

Prop	Type	Description
onCheckedChange()?	(checked) => void	Called after the checked state changes.

• onCheckedChange()?(checked) => void

  Called after the checked state changes.

Full types: API reference.