Switch

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

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

	return <Switch id="example" name="example" checked={example} onChange={setExample} />;
};

/* eslint-disable jsx-a11y/label-has-associated-control */
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">
			<label className="label flex items-center justify-between gap-4">
				<p>Default to the inactive state.</p>
				<Switch id="disturb" name="disturb" checked={disturb} onChange={setDisturb} />
			</label>
			<hr className="hr" />
			<label className="label flex items-center justify-between gap-4">
				<p>Default to the active state.</p>
				<Switch id="notifications" name="notifications" checked={notifications} onChange={setNotifications} />
			</label>
			<hr className="hr" />
			<label className="label flex items-center justify-between gap-4">
				<p>Shown in disabled mode.</p>
				<Switch id="disabled" name="disabled" checked={disabled} onChange={setDisabled} disabled />
			</label>
		</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
			id="icons"
			name="icons"
			stateActive="bg-secondary-500"
			checked={icons}
			onChange={setIcons}
			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
			id="compact"
			name="compact"
			checked={compact}
			onChange={setCompact}
			width="w-9"
			stateActive="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
			id="mode"
			name="mode"
			stateActive="bg-surface-200"
			checked={mode}
			onChange={handleModeChange}
			inactiveChild={<IconMoon size="14" />}
			activeChild={<IconSun size="14" />}
		/>
	);
};