Toggle

Toggle is a checkbox styled as a switch. Used for binary choices or switching settings on/off.

Basic Examples

Toggle switches with various configurations

await import('/components/data-input/toggle.js');
const { tags, $ } = Lightview;
const { div, Toggle } = tags;

// 1. Basic toggle
const basic = Toggle({ 
    label: 'Wi-Fi',
    defaultChecked: true,
    color: 'primary'
});

// 2. Toggle with description
const withDesc = Toggle({ 
    label: 'Dark Mode',
    description: 'Switch between light and dark themes',
    color: 'secondary'
});

// 3. Toggle with label on right
const labelRight = Toggle({ 
    label: 'Notifications',
    labelPosition: 'right',
    color: 'accent'
});

// 4. Disabled toggle
const disabled = Toggle({ 
    label: 'Maintenance Mode',
    defaultChecked: true,
    disabled: true
});

// Insert all examples
$('#example').content(
    div({ style: 'display: flex; flex-direction: column; gap: 1rem' }, basic, withDesc, labelRight, disabled)
);
await import('/components/data-input/toggle.js');
const { $, tags } = Lightview;
const { Toggle } = tags;

const demo = {
    tag: 'div',
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem' },
    children: [
        {
            tag: Toggle,
            attributes: { label: 'Wi-Fi', defaultChecked: true, color: 'primary' }
        },
        {
            tag: Toggle,
            attributes: { label: 'Dark Mode', description: 'Switch between light and dark themes', color: 'secondary' }
        },
        {
            tag: Toggle,
            attributes: { label: 'Notifications', labelPosition: 'right', color: 'accent' }
        },
        {
            tag: Toggle,
            attributes: { label: 'Maintenance Mode', defaultChecked: true, disabled: true }
        }
    ]
};

$('#example').content(demo);
await import('/components/data-input/toggle.js');
const { $ } = Lightview;

const demo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem',
        children: [
            {
                Toggle: { label: 'Wi-Fi', defaultChecked: true, color: 'primary' }
            },
            {
                Toggle: { label: 'Dark Mode', description: 'Switch between light and dark themes', color: 'secondary' }
            },
            {
                Toggle: { label: 'Notifications', labelPosition: 'right', color: 'accent' }
            },
            {
                Toggle: { label: 'Maintenance Mode', defaultChecked: true, disabled: true }
            }
        ]
    }
};

$('#example').content(demo);
<!-- Import the component (registers lv-toggle) -->
<script type="module" src="/components/data-input/toggle.js"></script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
    <lv-toggle label="Wi-Fi" default-checked color="primary"></lv-toggle>
    <lv-toggle label="Dark Mode" description="Switch between light and dark themes" color="secondary"></lv-toggle>
    <lv-toggle label="Notifications" label-position="right" color="accent"></lv-toggle>
    <lv-toggle label="Maintenance Mode" default-checked disabled></lv-toggle>
</div>

Reactive Example

Two-way binding with signals 

await import('/components/data-input/toggle.js');
const { signal, tags, $ } = Lightview;
const { div, p, Toggle } = tags;

// Signals for settings
const wifi = signal(true);
const bluetooth = signal(false);
const airplane = signal(false);

// Reactive toggles
const reactiveDemo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 24rem' },
    Toggle({ 
        label: 'Wi-Fi',
        description: () => wifi.value ? 'Connected to HomeNetwork' : 'Disconnected',
        checked: wifi,
        color: 'primary'
    }),
    Toggle({ 
        label: 'Bluetooth',
        description: () => bluetooth.value ? 'Discoverable' : 'Off',
        checked: bluetooth,
        color: 'info'
    }),
    Toggle({ 
        label: 'Airplane Mode',
        description: 'Disables all wireless connections',
        checked: airplane,
        color: 'warning'
    }),
    div({ class: 'divider' }),
    p({ class: 'text-sm font-mono opacity-70' },
        () => `WiFi: ${wifi.value}, BT: ${bluetooth.value}, Airplane: ${airplane.value}`
    )
);

$('#example').content(reactiveDemo);
await import('/components/data-input/toggle.js');
const { signal, $, tags } = Lightview;
const { Toggle } = tags;

const wifi = signal(true);
const bluetooth = signal(false);
const airplane = signal(false);

const demo = {
    tag: 'div',
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 24rem' },
    children: [
        {
            tag: Toggle,
            attributes: {
                label: 'Wi-Fi',
                description: () => wifi.value ? 'Connected to HomeNetwork' : 'Disconnected',
                checked: wifi,
                color: 'primary'
            }
        },
        {
            tag: Toggle,
            attributes: {
                label: 'Bluetooth',
                description: () => bluetooth.value ? 'Discoverable' : 'Off',
                checked: bluetooth,
                color: 'info'
            }
        },
        {
            tag: Toggle,
            attributes: {
                label: 'Airplane Mode',
                description: 'Disables all wireless connections',
                checked: airplane,
                color: 'warning'
            }
        },
        { tag: 'div', attributes: { class: 'divider' } },
        {
            tag: 'p',
            attributes: { class: 'text-sm font-mono opacity-70' },
            children: [() => `WiFi: ${wifi.value}, BT: ${bluetooth.value}, Airplane: ${airplane.value}`]
        }
    ]
};

$('#example').content(demo);
await import('/components/data-input/toggle.js');
const { signal, $ } = Lightview;

const wifi = signal(true);
const bluetooth = signal(false);
const airplane = signal(false);

const demo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 24rem',
        children: [
            {
                Toggle: {
                    label: 'Wi-Fi',
                    description: () => wifi.value ? 'Connected to HomeNetwork' : 'Disconnected',
                    checked: wifi,
                    color: 'primary'
                }
            },
            {
                Toggle: {
                    label: 'Bluetooth',
                    description: () => bluetooth.value ? 'Discoverable' : 'Off',
                    checked: bluetooth,
                    color: 'info'
                }
            },
            {
                Toggle: {
                    label: 'Airplane Mode',
                    description: 'Disables all wireless connections',
                    checked: airplane,
                    color: 'warning'
                }
            },
            { div: { class: 'divider' } },
            {
                p: {
                    class: 'text-sm font-mono opacity-70',
                    children: [() => `WiFi: ${wifi.value}, BT: ${bluetooth.value}, Airplane: ${airplane.value}`]
                }
            }
        ]
    }
};

$('#example').content(demo);

Props

Prop Type Default Description
checked boolean | signal - Checked state (reactive with signals)
defaultChecked boolean false Default checked state for uncontrolled mode
label string - Label text displayed next to toggle
labelPosition string 'left' 'left' | 'right' - Position of label relative to toggle
description string | function - Description text below the label (can be reactive)
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
disabled boolean false Disable the toggle
onChange function - Callback when value changes: (checked, event) => void
useShadow boolean * Render in Shadow DOM. *Follows global initComponents() setting

Toggle Gallery

Live examples using <lv-toggle> custom elements.

Colors

Sizes

Labels & Descriptions

States