Switch

import React from 'react';
import { Switch } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [example, setExample] = React.useState(false);

  return <Switch name="example" checked={example} onCheckedChange={(e) => setExample(e.checked)} />;
};

import React from 'react';
import { Switch } from '@skeletonlabs/skeleton-react';

export const Page: React.FC = () => {
  const [disturb, setDisturb] = React.useState(false);
  const [notifications, setNotifications] = React.useState(true);
  const [disabled, setDisabled] = React.useState(false);

  return (
    <section className="w-full space-y-4">
      <div className="flex justify-between items-center gap-4">
        <p>Default to the inactive state.</p>
        <Switch name="disturb" checked={disturb} onCheckedChange={(e) => setDisturb(e.checked)}></Switch>
      </div>
      <hr className="hr" />
      <div className="flex justify-between items-center gap-4">
        <p>Default to the active state.</p>
        <Switch name="notifications" checked={notifications} onCheckedChange={(e) => setNotifications(e.checked)}></Switch>
      </div>
      <hr className="hr" />
      <div className="flex justify-between items-center gap-4">
        <p>Shown in disabled mode.</p>
        <Switch name="disabled" checked={disabled} onCheckedChange={(e) => setDisabled(e.checked)} disabled></Switch>
      </div>
    </section>
  );
};

import React from 'react';
import { Switch } from '@skeletonlabs/skeleton-react';
import { Check as IconCheck, X as IconX } from 'lucide-react';

export const Page: React.FC = () => {
  const [icons, setIcons] = React.useState(false);

  return (
    <Switch
      name="icons"
      controlActive="bg-secondary-500"
      checked={icons}
      onCheckedChange={(e) => setIcons(e.checked)}
      inactiveChild={<IconX size="14" />}
      activeChild={<IconCheck size="14" />}
    />
  );
};

import React from 'react';
import { Switch } from '@skeletonlabs/skeleton-react';
import { Frown as IconFrown, Smile as IconSmile } from 'lucide-react';

export const Page: React.FC = () => {
  const [compact, setCompact] = React.useState(false);

  return (
    <Switch
      name="compact"
      checked={compact}
      onCheckedChange={(e) => setCompact(e.checked)}
      controlWidth="w-9"
      controlActive="preset-filled-tertiary-500"
      compact
      inactiveChild={<IconFrown size="18" />}
      activeChild={<IconSmile size="18" />}
    />
  );
};

import React from 'react';
import { Switch } from '@skeletonlabs/skeleton-react';
import { Moon as IconMoon, Sun as IconSun } from 'lucide-react';

export const Page: React.FC = () => {
  // Bind to the checked state
  const [mode, setMode] = React.useState(false);

  // Handle the change in state when toggled.
  function handleModeChange(newValue: boolean) {
    // Update the bound state
    setMode(newValue);

    // NOTE: implementation may differ per Tailwind config and framework:
    // https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually
    console.log({ mode });
  }

  return (
    <Switch
      name="mode"
      controlActive="bg-surface-200"
      checked={mode}
      onCheckedChange={(e) => handleModeChange(e.checked)}
      inactiveChild={<IconMoon size="14" />}
      activeChild={<IconSun size="14" />}
    />
  );
};