Toggle
Atomrole="switch" toggle/switch with three sizes, description slot, and disabled support. Fully accessible via CSS transform without a native input.
<%- include('modules/ui/Toggle', { id: 'notif', label: 'Notifications enabled', checked: true }) %><%- include('modules/ui/Toggle', { id: 'dark', label: 'Dark mode' }) %><%- include('modules/ui/Toggle', { id: 't', checked: true }) %><%- include('modules/ui/Toggle', { id: 'a', label: 'Enabled (disabled)', checked: true, disabled: true }) %>
<%- include('modules/ui/Toggle', { id: 'b', label: 'Disabled option', checked: false, disabled: true }) %><%- include('modules/ui/Toggle', { id: 'sm', label: 'Small', size: 'sm', checked: true }) %>
<%- include('modules/ui/Toggle', { id: 'md', label: 'Medium', size: 'md', checked: true }) %>
<%- include('modules/ui/Toggle', { id: 'lg', label: 'Large', size: 'lg', checked: true }) %><%
var _sz = locals.size || 'md';
var _ch = !!locals.checked;
var _dis = !!locals.disabled;
var _id = locals.id || 'toggle-' + Math.random().toString(36).substr(2, 9);
var sizeMap = {
sm: { track: 'h-4 w-7', thumb: 'h-3 w-3', on: 'translate-x-3.5' },
md: { track: 'h-5 w-9', thumb: 'h-3.5 w-3.5', on: 'translate-x-4' },
lg: { track: 'h-6 w-11', thumb: 'h-4 w-4', on: 'translate-x-5' }
};
var sm = sizeMap[_sz] || sizeMap.md;
var trackBg = _ch ? 'bg-primary' : 'bg-surface-sunken border border-border';
var thumbTranslate = _ch ? sm.on : 'translate-x-0';
%>