Switch

"use client";

import React from "react";
import * as Switch from "@lora-ui/switch";

export default function Controlled() {
  const [checked, setChecked] = React.useState(true);

  function onCheckedChange() {
    setChecked(!checked);
  }
  return (
    <div className="flex items-start">
      <Switch.Root
        id="controlled-switch-1"
        checked={checked}
        onCheckedChange={onCheckedChange}
        className="group"
      >
        <Switch.Track className="border-box relative h-[20px] w-[36px] rounded-xl bg-[#f2f4f7] p-[2px] outline-offset-2 group-has-[:disabled]:pointer-events-none group-has-[:checked]:bg-[#7f56d9] group-has-[:disabled]:bg-[#f2f4f7] hover:group-has-[:checked]:bg-[#6941c6] dark:bg-[#1f242f] dark:group-has-[:checked]:bg-[#7f56d9] dark:group-has-[:checked]:group-has-[:disabled]:bg-[#1f242f] dark:hover:group-has-[:checked]:bg-[#9e77ed]">
          <Switch.Thumb className="absolute left-[2px] top-[2px] h-[16px] w-[16px] rounded-full bg-[#ffffff] shadow group-has-[:checked]:translate-x-[16px]" />
        </Switch.Track>
      </Switch.Root>
      <label htmlFor="controlled-switch-1">
        <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
          Remember me
        </p>
        <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
          Save my login details for next time.
        </p>
      </label>
    </div>
  );
}

"use client";

import * as Switch from "@lora-ui/switch";

export default function Uncontrolled() {
  function changeCheckedHandler(checked) {
    console.log(checked);
  }
  return (
    <>
      <div className="flex items-start">
        <Switch.Root
          id="uncontrolled-switch-1"
          defaultChecked
          onCheckedChange={changeCheckedHandler}
          className="group"
        >
          <Switch.Track className="border-box relative h-[20px] w-[36px] rounded-xl bg-[#f2f4f7] p-[2px] outline-offset-2 group-has-[:checked]:bg-[#7f56d9] hover:group-has-[:checked]:bg-[#6941c6] dark:bg-[#1f242f] dark:group-has-[:checked]:bg-[#7f56d9] dark:group-has-[:checked]:group-has-[:disabled]:bg-[#1f242f] dark:hover:group-has-[:checked]:bg-[#9e77ed]">
            <Switch.Thumb className="absolute left-[2px] top-[2px] h-[16px] w-[16px] rounded-full bg-[#ffffff] shadow group-has-[:checked]:translate-x-[16px]" />
          </Switch.Track>
        </Switch.Root>
        <label htmlFor="uncontrolled-switch-1">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
      <div className="flex items-start">
        <Switch.Root
          id="uncontrolled-switch-2"
          defaultChecked
          disabled
          className="group"
        >
          <Switch.Track className="border-box relative h-[20px] w-[36px] rounded-xl bg-[#f2f4f7] p-[2px] outline-offset-2 group-has-[:disabled]:pointer-events-none group-has-[:checked]:bg-[#7f56d9] group-has-[:disabled]:bg-[#f2f4f7] hover:group-has-[:checked]:bg-[#6941c6] dark:bg-[#1f242f] dark:group-has-[:checked]:bg-[#7f56d9] dark:group-has-[:checked]:group-has-[:disabled]:bg-[#1f242f] dark:hover:group-has-[:checked]:bg-[#9e77ed]">
            <Switch.Thumb className="absolute left-[2px] top-[2px] h-[16px] w-[16px] rounded-full bg-[#ffffff] shadow group-has-[:checked]:translate-x-[16px] group-has-[:disabled]:bg-[f9fafb]" />
          </Switch.Track>
        </Switch.Root>
        <label htmlFor="uncontrolled-switch-2">
          <p className="ml-2 text-sm font-medium text-[#344054] dark:text-[#cecfd2]">
            Remember me
          </p>
          <p className="ml-2 text-sm font-normal text-[#475467] dark:text-[#94969c]">
            Save my login details for next time.
          </p>
        </label>
      </div>
    </>
  );
}