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.
  • tristate: boolean whether to enable third indeterminate behavior when type is SwitchInput::CHECKBOX. Defaults to false.

  • indeterminateValue: string | int the value for indeterminate state when `tristate` is true and type is SwitchInput::CHECKBOX. Defaults to null.

  • indeterminateToggle: array | bool HTML attributes for the toggle indicator to turn indeterminate state on and off. The following special attributes are recognized:

    • label: string, the indeterminate toggle icon markup. Defaults to ×.

    If this is set to false the indeterminate toggle icon will not be shown.

  • items: array 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.

  • disabled: boolean whether the input widget is to be entirely disabled. Defaults to false.

  • readonly: boolean whether the input widget is to be entirely readonly. Defaults to false.

  • 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 = [
        "init.bootstrapSwitch" => "function() { log("init"); }",
        "switchChange.bootstrapSwitch" => "function() { log("switchChange"); }",
    ];
    

Usage with ActiveForm and model and initial value set to true.

With a model and without ActiveForm

Usage without a model and initial value set to true.

A disabled Switch input

×

Enable tristate behavior

Enable tristate behavior with custom indeterminate value, custom toggle icon, and a custom label for the indeterminate state.

use kartik\widgets\SwitchInput

// Usage with ActiveForm and model and initial value set to true
$model->rememberMe = true;
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 and initial value set to true
echo '<label class="control-label">Status</label>';
echo SwitchInput::widget(['name'=>'status_1', 'value'=>true]);

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

// Switch Input inside a Bootstrap Modal.
echo SwitchInput::widget([
    'name' => 'status_4',
    'tristate' => true
]);

// Enable tristate behavior with custom indeterminate value, custom toggle icon, and a custom label for the indeterminate state.
echo SwitchInput::widget([
    'name' => 'status_5',
    'value' => -1,
    'tristate' => true,
    'indeterminateValue' => -1, // set indeterminate as -1 default is null
    'indeterminateToggle' => ['label'=>'&lt;i class="glyphicon glyphicon-remove-sign">&lt;/i>'],
    'pluginOptions' => [
        'labelText'=>'<i class="glyphicon glyphicon-stop"></i>'
    ]
]);

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.

Label and input vertically stacked on separate lines

Adjust handle width for longer labels

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

// Adjust handle width for longer labels
echo SwitchInput::widget([
    'name'=>'status_41',
    'pluginOptions'=>[
        'handleWidth'=>60,
        'onText'=>'Active',
        'offText'=>'Inactive'
    ]
]);