Switch Input Widget Switch Input.php

Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

The SwitchInput widget turns checkboxes and radio buttons into toggle switches. The plugin is a wrapper for the Bootstrap Switch Plugin and is specially styled for Bootstrap 3.

Important

This widget can be also installed in isolation outside this bundle if needed. In addition to using via \kartik\widgets namespace, this widget can be also installed from the yii2-widget-switchinput repository and can also be accessed via \kartik\switchinput\SwitchInput namespace.

The widget supports all parameters that one would pass for any Yii Input Widget. The additional parameter settings specially available for the SwitchInput widget configuration are:
  • type: integer the type of the switch widget. Defaults to 1 or SwitchInput::CHECKBOX. Should be one of the following:

    • 1 or SwitchInput::CHECKBOX: Displays a single toggle switch.
    • 2 or SwitchInput::RADIO: Displays a stacked list of toggle switches as an enhanced radiolist control.
  • items: array the the list of items for SwitchInput::RADIO type. The following array keys need to be set.

    • label: string/boolean the label for each radio item. If this is set to false or not set, the label will not be displayed.

    • value: string the value of each radio item.

    • options: array the HTML attributes for each radio item.

    • labelOptions: array the HTML attributes for the label for each radio item.

  • inlineLabel: boolean whether label is aligned on same line. Defaults to true. If set to false, the label and input will be on separate lines.

  • itemOptions: array the HTML attributes to default for all radio items. The options set at items level will override this. This parameter is applicable only for SwitchInput::RADIO type.

  • labelOptions: array the HTML attributes to default for for all radio item labels. The labelOptions set at items level will override this. This parameter is applicable only for SwitchInput::RADIO type.

  • separator: string the the separator content between each radio item. Defaults to "  ". Applicable only for SwitchInput::RADIO type.

  • containerOptions: array the HTML attributes for the radio group container. This parameter is applicable only for SwitchInput::RADIO type.

  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the plugin settings/options for the Bootstrap Switch Plugin.

  • pluginEvents: array the SwitchInput JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin documentation for details. For example:

    pluginEvents = [
        "switchChange" => "function() { log("switchChange"); }",
        "click" => "function() { log("click"); }",
    ];
    

Usage with ActiveForm and model

With a model and without ActiveForm

Usage without a model

A disabled Switch input

use kartik\widgets\SwitchInput

// Usage with ActiveForm and model
echo $form->field($model, 'rememberMe')->widget(SwitchInput::classname(), []);

// With a model and without ActiveForm
echo '<label class="control-label">Status</label>';
echo $form->field($model, 'status')->widget(SwitchInput::classname(), []);

// Usage without a model
echo '<label class="control-label">Status</label>';
echo SwitchInput::widget(['name'=>'status_1']);

// A disabled Switch input
echo '<label class="control-label">Status</label>';
echo SwitchInput::widget([
    'name' => 'status_3',
    'options' => [
        'disabled' => true
    ],
]);

Label and input vertically stacked on separate lines

Change the widget size and set colors for on and off statuses

     

Display widget as a radio control (in mini size and with custom label style)

Change the on and off labels

Advanced HTML formatted labels

Set animate to false for disabling the widget animation. If not set, it defaults to true.

Switch Input inside a Bootstrap Modal.

use kartik\widgets\SwitchInput

// Label and input vertically stacked on separate lines
echo SwitchInput::widget([
    'name' => 'status_10',
    'inlineLabel' => false,
]);

// Change the widget size and set colors for on and off statuses
echo SwitchInput::widget([
    'name' => 'status_11',
    'pluginOptions' => [
        'size' => 'large',
        'onColor' => 'success',
        'offColor' => 'danger',
    ]
]);

// Display widget as a radio control in mini size with custom label style
echo SwitchInput::widget([
    'name' => 'status_12',
    'type' => SwitchInput::RADIO,
    'items' => [
        ['label' => 'Low', 'value' => 1],
        ['label' => 'Medium', 'value' => 2],
        ['label' => 'High', 'value' => 3],
        'pluginOptions' => ['size' => 'mini'],
        'labelOptions' => ['style' => 'font-size: 12px'],
    ]
]);

// Change the on and off labels
echo SwitchInput::widget([
    'name' => 'status_13',
    'pluginOptions' => [
        'onText' => 'Yes',
        'offText' => 'No',
    ]
]);

// Advanced HTML formatted labels
echo SwitchInput::widget([
    'name' => 'status_14',
    'pluginOptions' => [
        'labelText' => '<i class="glyphicon glyphicon-fullscreen"></i>',
        'onText' => '<i class="glyphicon glyphicon-ok"></i>',
        'offText' => '<i class="glyphicon glyphicon-remove"></i>',
    ]
]);

// Control widget animation
echo SwitchInput::widget([
    'name' => 'status_15',
    'pluginOptions' => [
        'animate' => false
    ]
]);

// SwitchInput inside a Bootstrap Modal
use yii\bootstrap\Modal;
Modal::begin([
    'options'=>['id'=>'kartik'],
    'header' => '<h4 style="margin:0; padding:0">Switch Input Inside Modal</h4>',
    'toggleButton' => ['label' => 'Show Modal', 'class'=>'btn btn-lg btn-primary'],
]);
echo SwitchInput::widget(['name' => 'status_16']);
Modal::end();