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

Basic Examples

Toggle switches with various configurations

// Dynamic import of the Toggle component

const { default: Toggle } = await import('/components/data-input/toggle.js');

const { tags, $ } = Lightview;
const { div } = 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
$('#demo').insert(
    div({ class: 'space-y-4' }, basic, withDesc, labelRight, disabled)
);

Reactive Example

Two-way binding with signals


const { default: Toggle } = await import('/components/data-input/toggle.js');

const { signal, tags, $ } = Lightview;
const { div, p, span } = tags;

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

// Reactive toggles
const reactiveDemo = div({ class: 'space-y-4 max-w-sm' },
    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}`
    )
);

$('#demo').insert(reactiveDemo);

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

Basic Examples

Reactive Example

Props

Colors

Sizes

With Label