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() ?>
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
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() ?>