Switch Button
Switch buttons represent the choice between two states.
Default switch
As this widget is designed to work with ActiveField form fields and non-ActiveField form fields both,
it is required to either specify $name (non-ActiveField) or $model and $attribute
(ActiveField).
<?= \macgyer\yii2materializecss\widgets\form\SwitchButton::widget([
'name' => 'defaultSwitchButton',
]); ?>
<div id="w0" class="switch">
<label>
Off
<input type="hidden" name="defaultSwitchButton" value="0">
<input type="checkbox" name="defaultSwitchButton" value="1">
<span class="lever"></span>
On
</label>
</div>
Rendered result
Modification
Change the state's labels with $onText and $offText.
<?php
// ActiveForm example
<?php $form = \macgyer\yii2materializecss\widgets\form\ActiveForm::begin() ?>
<?= $form->field($exampleForm, 'is_active')
->widget(SwitchButton::class, [
'onText' => 'Yes',
'offText' => 'No',
'uncheck' => null
])
?>
<?php \macgyer\yii2materializecss\widgets\form\ActiveForm::end() ?>
<form id="w1" action="" method="post">
<div class="input-field field-exampleform-is_active">
<div id="exampleform-is_active" class="validate switch">
<label>
<span class="offLabel">No</span>
<input type="hidden" name="ExampleForm[is_active]" value="0">
<input type="checkbox" id="exampleform-is_active" name="ExampleForm[is_active]" value="1">
<span class="lever"></span>
<span class="onLabel">Yes</span>
</label>
</div>
<label for="exampleform-is_active">Is Active</label>
<span class="help-block helper-text"></span>
</div>
</form>
Rendered result
Please note:
The switch has been styled to be displayed accordingly.
Using icons to display states
As of version 1.0.8 you can use icons instead of label text or you can combine both.
<?= \macgyer\yii2materializecss\widgets\form\SwitchButton::widget([
'name' => 'iconSwitchButton',
'onText' => false,
'onIcon' => [
'name' => 'visibility',
'position' => 'right',
],
'offText' => false,
'offIcon' => [
'name' => 'visibility_off',
'position' => 'left',
],
]); ?>
<div id="w2" class="switch">
<label>
<span class="offLabel">
<i id="w3" class="material-icons left small">visibility_off</i>
</span>
<input type="hidden" name="iconSwitchButton" value="0">
<input type="checkbox" name="iconSwitchButton" value="1">
<span class="lever"></span>
<span class="onLabel">
<i id="w4" class="material-icons right small">visibility</i>
</span>
</label>
</div>
Rendered result
Please note:
The switch has been styled to be displayed accordingly.
HTML-flavored state labels
As of version 1.0.8 you even can use HTML for your on/off labels. By default the $onText and
$offText properties are HTML-encoded.
For HTML state labels to work, you need to disable HTML encoding by setting $encodeOnText and
$encodeOffText properties to false, if needed.
<?= \macgyer\yii2materializecss\widgets\form\SwitchButton::widget([
'name' => 'htmlSwitchButton',
'onText' => '<em>On</em>',
'encodeOnText' => false,
'offText' => 'Off',
]); ?>
<div id="w5" class="switch">
<label>
<span class="offLabel">Off</span>
<input type="hidden" name="htmlSwitchButton" value="0">
<input type="checkbox" name="htmlSwitchButton" value="1">
<span class="lever"></span>
<span class="onLabel"><em>On</em></span>
</label>
</div>
Rendered result
Please note:
The switch has been styled to be displayed accordingly.