Examples Bootstrap Version 4.5.2 + FriendsOfCake/bootstrap-ui

Bootstrap 4 switch(helper use) reference

PHP(ctp)

<?php
$templates = [
    'small' => [
        'checkboxContainer' => '<div class="form-group {{type}}{{required}}">
            <span class="switch switch-sm">{{content}}</span>{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group {{type}}{{required}}
            is-invalid"><span class="switch switch-sm">{{content}}</span>{{error}}{{help}}</div>',
    ],
    'normal' => [
        'checkboxContainer' => '<div class="form-group {{type}}{{required}}">
            <span class="switch">{{content}}</span>{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group {{type}}{{required}}
            is-invalid"><span class=""switch>{{content}}</span>{{error}}{{help}}</div>',
    ],
    'large' => [
        'checkboxContainer' => '<div class="form-group {{type}}{{required}}">
            <span class="switch switch-lg">{{content}}</span>{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group {{type}}{{required}}
            is-invalid"><span class="switch switch-lg">{{content}}</span>{{error}}{{help}}</div>',
    ]
];
?>
<?= $this->Form->create(); ?>
<?= $this->Form->control('Input Text'); ?>
<?= $this->Form->control('Small switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch1',
    'id' => 'roundSwitch1',
    'hiddenField' => false,
    'class' => 'switch',
    'templates' => $templates['small'],
])?>
<?= $this->Form->control('Normal switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch2',
    'id' => 'roundSwitch2',
    'hiddenField' => false,
    'class' => 'switch',
    'templates' => $templates['normal'],
])?>
<?= $this->Form->control('Large switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch3',
    'id' => 'roundSwitch3',
    'hiddenField' => false,
    'class' => 'switch',
    'templates' => $templates['large'],
])?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

Where to get CSS

Bootstrap 4 switch(helper use) inline

PHP(ctp)

<?php
$templates = [
    'small' => [
        'checkboxInlineContainer' => '<div class="form-group form-check-inline {{type}}{{required}}"><span class="switch switch-sm">{{content}}{{help}}</span></div>',
        'checkboxInlineContainerError' => '<div class="form-group form-check-inline {{type}}{{required}} is-invalid"><span class="switch switch-sm">{{content}}{{error}}{{help}}</span></div>',
    ],
    'normal' => [
        'checkboxInlineContainer' => '<div class="form-group form-check-inline {{type}}{{required}}"><span class="switch">{{content}}{{help}}</span></div>',
        'checkboxInlineContainerError' => '<div class="form-group switch form-check-inline {{type}}{{required}} is-invalid"><span class="switch">{{content}}{{error}}{{help}}</span></div>',
    ],
    'large' => [
        'checkboxInlineContainer' => '<div class="form-group form-check-inline {{type}}{{required}}"><span class="switch switch-lg">{{content}}{{help}}</span></div>',
        'checkboxInlineContainerError' => '<div class="form-group form-check-inline {{type}}{{required}} is-invalid"><span class="switch switch-lg">{{content}}{{error}}{{help}}</span></div>',
    ]
];
?>
<?= $this->Form->create(null, [
    'class' => 'form-inline',
    // 'align' => 'inline',
]) ?>
<?= $this->Form->control('Input Text'); ?>
<?= $this->Form->control('Small switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch4',
    'id' => 'roundSwitch4',
    'hiddenField' => false,
    'class' => 'switch',
    'inline' => true,
    'templates' => $templates['small'],
])?>
<?= $this->Form->control('Normal switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch5',
    'id' => 'roundSwitch5',
    'hiddenField' => false,
    'class' => 'switch',
    'inline' => true,
    'templates' => $templates['normal'],
])?>
<?= $this->Form->control('Large switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch6',
    'id' => 'roundSwitch6',
    'hiddenField' => false,
    'class' => 'switch',
    'inline' => true,
    'templates' => $templates['large'],
])?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

Bootstrap 4 switch(helper use) horizontal

PHP(ctp)

<?php
$templates = [
    'small' => [
        'checkboxContainer' => '<div class="form-group row
            {{type}}{{required}}">{{content}}{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group row
            {{type}}{{required}} is-invalid">{{content}}{{error}}{{help}}</div>',
        'checkboxFormGroup' => '<div class="offset-md-2 col-md-10"><div
            class="switch switch-sm">{{input}}{{label}}</div>{{error}}{{help}}</div>',
    ],
    'normal' => [
        'checkboxContainer' => '<div class="form-group row
            {{type}}{{required}}">{{content}}{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group row
            {{type}}{{required}} is-invalid">{{content}}{{error}}{{help}}</div>',
        'checkboxFormGroup' => '<div class="offset-md-2 col-md-10"><div
            class="switch">{{input}}{{label}}</div>{{error}}{{help}}</div>',
    ],
    'large' => [
        'checkboxContainer' => '<div class="form-group row
            {{type}}{{required}}">{{content}}{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group row
            {{type}}{{required}}
            is-invalid">{{content}}{{error}}{{help}}</div>',
        'checkboxFormGroup' => '<div class="offset-md-2 col-md-10"><div
            class="switch switch-lg">{{input}}{{label}}</div>{{error}}{{help}}</div>',
    ]
];
?>
<?= $this->Form->create(null, [
    'align' => 'horizontal',
]) ?>
<?= $this->Form->control('Input Text'); ?>
<?= $this->Form->control('Small switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch7',
    'id' => 'roundSwitch7',
    'hiddenField' => false,
    'class' => 'switch',
    'templates' => $templates['small'],
])?>
<?= $this->Form->control('Normal switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch8',
    'id' => 'roundSwitch8',
    'hiddenField' => false,
    'class' => 'switch',
    'templates' => $templates['normal'],
])?>
<?= $this->Form->control('Large switch', [
    'type' => 'checkbox',
    'name' => 'roundSwitch9',
    'id' => 'roundSwitch9',
    'hiddenField' => false,
    'class' => 'switch',
    'templates' => $templates['large'],
])?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>

Bootstrap 4 switch(helper use) horizontal CakePHP Style

Small switch
Normal switch
Large switch

PHP(ctp)

<?php
$templates = [
    'small' => [
        'checkboxContainer' => '<div class="form-group row
            {{type}}{{required}}">{{content}}{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group row
            {{type}}{{required}} is-invalid">{{content}}{{error}}{{help}}</div>',
        'checkboxFormGroup' => '<span class="col-md-2">{{title}}</span><div class="col-md-10"><div
            class="switch switch-sm">{{input}}{{label}}</div>{{error}}{{help}}</div>',
    ],
    'normal' => [
        'checkboxContainer' => '<div class="form-group row
            {{type}}{{required}}">{{content}}{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group row
            {{type}}{{required}} is-invalid">{{content}}{{error}}{{help}}</div>',
        'checkboxFormGroup' => '<span class="col-md-2">{{title}}</span><div class="col-md-10"><div
            class="switch">{{input}}{{label}}</div>{{error}}{{help}}</div>',
    ],
    'large' => [
        'checkboxContainer' => '<div class="form-group row
            {{type}}{{required}}">{{content}}{{help}}</div>',
        'checkboxContainerError' => '<div class="form-group row
            {{type}}{{required}}
            is-invalid">{{content}}{{error}}{{help}}</div>',
        'checkboxFormGroup' => '<span class="col-md-2">{{title}}</span><div class="col-md-10"><div
            class="switch switch-lg">{{input}}{{label}}</div>{{error}}{{help}}</div>',
    ]
];
?>
<?= $this->Form->create(null, [
    'align' => 'horizontal',
]) ?>
<?= $this->Form->control('Input Text'); ?>
<?= $this->Form->control('toggle', [
    'type' => 'checkbox',
    'name' => 'roundSwitch10',
    'id' => 'roundSwitch10',
    'hiddenField' => false,
    'class' => 'switch',
    'templateVars' => ['title' => 'Small switch'] ,
    'templates' => $templates['small'],
])?>
<?= $this->Form->control('toggle', [
    'type' => 'checkbox',
    'name' => 'roundSwitch11',
    'id' => 'roundSwitch11',
    'hiddenField' => false,
    'class' => 'switch',
    'templateVars' => ['title' => 'Normal switch'] ,
    'templates' => $templates['normal'],
])?>
<?= $this->Form->control('toggle', [
    'type' => 'checkbox',
    'name' => 'roundSwitch12',
    'id' => 'roundSwitch12',
    'hiddenField' => false,
    'class' => 'switch',
    'templateVars' => ['title' => 'Large switch'] ,
    'templates' => $templates['large'],
])?>
<?= $this->Form->submit(__('submit'), ['class' => 'btn btn-primary']) ?>
<?= $this->Form->end() ?>