ToggleSwitch — Manhattan UI

Toggle Switch

On/off toggle with optional labels, state text, and keyboard accessibility.

Basic Toggle

Enable notifications

Pre-checked

Dark mode

With On/Off Labels

Status

Disabled

Locked setting

Toggle a switch to see output...

// Basic toggle
<?= $m->toggleSwitch('notifications')
    ->name('notifications')
    ->label('Enable notifications') ?>

// Pre-checked
<?= $m->toggleSwitch('darkMode')
    ->name('dark_mode')
    ->label('Dark mode')
    ->checked() ?>

// With state labels
<?= $m->toggleSwitch('status')
    ->name('status')
    ->label('Status')
    ->onLabel('Active')
    ->offLabel('Inactive') ?>

// Disabled
<?= $m->toggleSwitch('locked')
    ->label('Locked')
    ->checked()
    ->disabled() ?>

// Listen to native change event
document.getElementById('notifications')
    .addEventListener('change', function() {
        console.log('Toggled:', this.checked);
    });

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->toggleSwitch($id)`	`string`	Create a toggle switch component.
`->name($name)`	`string`	Form field name.
`->value($value)`	`string`	Hidden input value when checked.
`->checked($checked)`	`bool`	Set checked state (default: true).
`->disabled($disabled)`	`bool`	Disable the toggle.
`->label($label)`	`string`	Label text shown beside the switch.
`->onLabel($text)`	`string`	Text shown when switch is ON.
`->offLabel($text)`	`string`	Text shown when switch is OFF.