SwitchInput supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the SwitchInput::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set SwitchInput::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set SwitchInput::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set SwitchInput::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-widget-switchinput extension can be installed automatically or manually using one of these options:

$ php composer.phar require kartik-v/yii2-widget-switchinput "dev-master"

"kartik-v/yii2-widget-switchinput": "dev-master"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• 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"); }",
  ];
  

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'=>'<i class="fas fa-times-circle"></i>'],
    'pluginOptions' => [
        'labelText'=>'<i class="fas fa-stop"></i>'
    ]
]);

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="fas fa-fullscreen"></i>',
        'onText' => '<i class="fas fa-check"></i>',
        'offText' => '<i class="fas fa-remove"></i>',
    ]
]);

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

// SwitchInput inside a Bootstrap Modal
use common\components\Modal;
Modal::begin([
    'options'=>['id'=>'kartik'],
    'title' => 'Switch Input Inside Modal',
    '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'
    ]
]);