Перейти к содержимому
opensophy

Интерфейс

Переключатель

Кнопка-переключатель с двумя состояниями для управления логическими настройками.

Toggle

Кнопка-переключатель с двумя состояниями (вкл/выкл). Используется для управления логическими настройками.

Интерактивное демо

Пропсы

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Props = {
		checked?: boolean;
		label?: string;
		class?: string;
		onchange?: (checked: boolean) => void;
	};

	let {
		checked = false,
		label = '',
		class: className = '',
		onchange
	}: Props = $props();

	const toggle = () => {
		checked = !checked;
		onchange?.(checked);
	};
</script>

<button
	type="button"
	role="switch"
	aria-checked={checked}
	aria-label={label}
	onclick={toggle}
	class={cn(
		'inset-shadow relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors duration-150 ease-out',
		checked ? 'bg-accent' : 'bg-background-inset',
		className
	)}
>
	<span
		class={cn(
			'inline-block size-4 transform rounded-full bg-background shadow-sm transition-transform duration-150 ease-out',
			checked ? 'translate-x-6' : 'translate-x-1'
		)}
	></span>
</button>

<script lang="ts">
	import { cn } from '$lib/utils/cn';

	type Props = {
		checked?: boolean;
		label?: string;
		class?: string;
		onchange?: (checked: boolean) => void;
	};

	let {
		checked = false,
		label = '',
		class: className = '',
		onchange
	}: Props = $props();

	const toggle = () => {
		checked = !checked;
		onchange?.(checked);
	};
</script>

<button
	type="button"
	role="switch"
	aria-checked={checked}
	aria-label={label}
	onclick={toggle}
	class={cn(
		'inset-shadow relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors duration-150 ease-out',
		checked ? 'bg-accent' : 'bg-background-inset',
		className
	)}
>
	<span
		class={cn(
			'inline-block size-4 transform rounded-full bg-background shadow-sm transition-transform duration-150 ease-out',
			checked ? 'translate-x-6' : 'translate-x-1'
		)}
	></span>
</button>

Примеры использования

Включённое состояние

Включено
<Toggle checked={true} label="Включено" />
<Toggle checked={true} label="Включено" />

Выключенное состояние

Выключено
<Toggle checked={false} label="Выключено" />
<Toggle checked={false} label="Выключено" />

С обработчиком изменений 

<script>
	let isEnabled = $state(false);

	function handleChange(checked) {
		isEnabled = checked;
		console.log('Состояние:', checked);
	}
</script>

<div class="flex items-center gap-3">
	<Toggle checked={isEnabled} onchange={handleChange} label="Настройка" />
	<span>Настройка {isEnabled ? 'включена' : 'выключена'}</span>
</div>
<script>
	let isEnabled = $state(false);

	function handleChange(checked) {
		isEnabled = checked;
		console.log('Состояние:', checked);
	}
</script>

<div class="flex items-center gap-3">
	<Toggle checked={isEnabled} onchange={handleChange} label="Настройка" />
	<span>Настройка {isEnabled ? 'включена' : 'выключена'}</span>
</div>

Пропсы

Пропс Тип По умолчанию Описание
checked boolean false Текущее состояние
label string — Подпись для aria-label
class string — Дополнительные классы
onchange (checked: boolean) => void — Колбэк при изменении