CoolFace
Modelpublic

AbdulElahGwaith/free-react-tailwind-admin-dashboard

sourceHugging Faceupdated 8mo agoView on Hugging Face
0likes
ToggleSwitch.tsx41 linesDownload Raw Back to form-elements
1import ComponentCard from "../../common/ComponentCard";2import Switch from "../switch/Switch";3 4export default function ToggleSwitch() {5  const handleSwitchChange = (checked: boolean) => {6    console.log("Switch is now:", checked ? "ON" : "OFF");7  };8  return (9    <ComponentCard title="Toggle switch input">10      <div className="flex gap-4">11        <Switch12          label="Default"13          defaultChecked={true}14          onChange={handleSwitchChange}15        />16        <Switch17          label="Checked"18          defaultChecked={true}19          onChange={handleSwitchChange}20        />21        <Switch label="Disabled" disabled={true} />22      </div>{" "}23      <div className="flex gap-4">24        <Switch25          label="Default"26          defaultChecked={true}27          onChange={handleSwitchChange}28          color="gray"29        />30        <Switch31          label="Checked"32          defaultChecked={true}33          onChange={handleSwitchChange}34          color="gray"35        />36        <Switch label="Disabled" disabled={true} color="gray" />37      </div>38    </ComponentCard>39  );40}41