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orm\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

$form = ActiveForm::begin() ?>

echo $form->field($exampleForm, 'is_active')->widget(SwitchButton::className(), [
    'onText' => 'Yes',
    'offText' => 'No'
]);

ActiveForm::end()

<form id="w1" action="" method="post">
    
    <div class="input-field field-exampleform-is_active">
        <div id="exampleform-is_active" class="switch">
            <label>
                No
                <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>
                Yes
            </label>
        </div>
        
        <label for="exampleform-is_active">Is Active</label>
        <div class="help-block"></div>
    </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orm\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">visibility_off</i>
        </span>
        
        <input type="checkbox" name="iconSwitchButton" value="1">
        <span class="lever"></span>
        
        <span class="onLabel">
            <i id="w4" class="material-icons right">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orm\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="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.