Composer Package Manager Recommended

---

Installation via Composer is the recommended and most easy option to install Krajee Yii2 extensions. You can install yii2-widgets via composer package manager. Either run:

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

or add:

"kartik-v/yii2-widgets": "dev-master"

to your application's composer.json file.

Manual Install

---

You may also manually install the extension to your project (in case your composer install does not work). Just download the source ZIP or TAR ball and extract the extension asset files and folders into your project. You may need to install dependencies manually and also set the namespaces to the extensions in your Yii2 extensions configurations manually.

This widget class extends the Yii ActiveForm widget by adding Bootstrap library features and functionality. More enhancements are available through kartik\form\ActiveField. For example, you can set the new autoPlaceholder property within fieldConfig which will hide the label and display it as a placeholder.

Usage:

use kartik\form\ActiveForm;
$form = kartik\form\ActiveForm::begin(
[
    'id' => 'signup-form',
    'enableAjaxValidation' => true,
    'fieldConfig' => [
        'autoPlaceholder'=>true
    ]
]);

This component class extends the Yii ActiveField component by adding Bootstrap library features and functionality. The ActiveField class is automatically initialized within the kartik\form\ActiveForm class. So, one does not need to explicitly call this class, when calling kartik\form\ActiveForm.

Usage:

use kartik\form\ActiveForm;
$form = ActiveForm::begin();
echo $form->field($model, 'username');
ActiveForm::end();

The DepDrop widget is a Yii 2 wrapper for the dependent-dropdown jQuery plugin by Krajee. This plugin allows multi level dependent dropdown with nested dependencies. The plugin thus enables to convert normal select inputs to a dependent input field, whose options are derived based on value selected in another input/or a group of inputs. It works both with normal select options and select with optgroups as well.

Usage:

use kartik\depdrop\DepDrop

// Normal parent select
echo $form->field($model, 'cat')->dropDownList($catList, ['id'=>'cat-id']);

// Dependent Dropdown
echo $form->field($model, 'subcat')->widget(DepDrop::classname(), [
     'options' => ['id'=>'subcat-id'],
     'pluginOptions'=>[
         'depends'=>['cat-id'],
         'placeholder' => 'Select...',
         'url' => Url::to(['/site/subcat'])
     ]
 ]);

The Select2 widget is a Yii 2 wrapper for the Select2 jQuery plugin. This input widget is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. The widget is specially styled for Bootstrap library. The widget allows graceful degradation to a normal HTML select or text input, if the browser does not support JQuery. You can setup model validation rules for a model attribute that uses Select2 widget for input like any other field.

New release v2.0: The widget has been revamped and upgraded to v2.0 to implement Select2 plugin release v4.0. Select2 release v4.0 is a major rewrite over Select2 v4.x / 3.x and hence quite a few enhancements or changes should be expected. The following new functionalities and changes should be expected with this release.

• New theme property that allows you to set themes in Select2 to style your widget.

• A brand new theme by Krajee Select2::THEME_KRAJEE is now available and specially styled for yii2-widget-select2. This will help achieve various widget specific enhancements and features. This theme matches the Bootstrap library styling with various enhancements.

• Additional themes provided in form of Select2::THEME_DEFAULT, Select2::THEME_CLASSIC, and Select2::THEME_BOOTSTRAP. One can add their own custom theme and configure the widget

• No more query plugin property needed. It is also not mandatory to configure data even if you have not set tags or query or ajax. Widget will intelligently evaluate the properties and default list values.

• Enhanced tagging support. Use it just like a multiple select but with taggable values. In addition, one can create tags on the fly.

• Enhanced ajax support. Refer the usage demos for details.

• The initSelection method of Select2 3.5.x plugin is obsolete/removed. New initValueText property is been provided with the Select2 widget to cater to this (e.g. for ajax based loading).

• Ability to disable selective option values in the Select2 dropdown OR add HTML attributes to selective options.

• Enhancement by Krajee to disable the search box to use like a normal select.

• Enhancements to locales and translations. Allow multiple language Select2 widgets on the same page.

Usage:

use kartik\select2\Select2

// usage with ActiveForm and model
echo \$form->field(\$model, 'state_1')->widget(Select2::classname(), [
    'language' => 'de',
    'data' => $data,
    'options' => ['placeholder' => 'Select a state ...'],
    'pluginOptions' => [
        'allowClear' => true
    ],
]);

The TypeaheadBasic widget is a Yii 2 wrapper for for the Twitter Typeahead.js plugin with certain custom enhancements. This input widget is a jQuery based replacement for text inputs providing search and typeahead functionality. It is inspired by twitter.com's autocomplete search functionality and based on Twitter's typeahead.js, which is described as a fast and fully-featured autocomplete library. The widget is specially styled for Bootstrap library. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. You can setup model validation rules for a model attribute that uses TypeaheadBasic widget for input like any other field.

Usage:

use kartik\widgets\TypeaheadBasic

// usage with ActiveForm and model
echo $form->field($model, 'state_3')->widget(TypeaheadBasic::classname(), [
    'options' => ['placeholder' => 'Filter as you type ...'],
    'dataset' => [
        [
            'local' => $data,
            'limit' => 10
        ]
    ]
]);

The Typeahead widget is a Yii 2 wrapper for for the Twitter Typeahead.js plugin with certain custom enhancements. This input widget is a jQuery based replacement for text inputs providing search and typeahead functionality. It is inspired by twitter.com's autocomplete search functionality and based on Twitter's typeahead.js, which is described as a fast and fully-featured autocomplete library. The widget is specially styled for Bootstrap library. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. You can setup model validation rules for a model attribute that uses Typeahead widget for input like any other field.

Usage:

use kartik\widgets\Typeahead

// usage with ActiveForm and model
echo $form->field($model, 'state_3')->widget(Typeahead::classname(), [
    'options' => ['placeholder' => 'Filter as you type ...'],
    'dataset' => [
        [
            'local' => $data,
            'limit' => 10
        ]
    ]
]);

DatePicker widget is a Yii2 wrapper for the Bootstrap DatePicker plugin. The plugin is a fork of Stefan Petre's DatePicker (of eyecon.ro), with improvements by @eternicode. This widget is specially styled for Yii framework 2.0 and Bootstrap library. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. This widget supports these markups:

• Simple Input Markup
• Component Markup - Addon Prepended
• Component Markup - Addon Appended
• Inline / Embedded Markup
• Date Range Markup (from and to dates)

Usage:

use kartik\widgets\DatePicker

// usage without model
echo '<label>Check Issue Date</label>';
echo DatePicker::widget([
    'name' => 'check_issue_date', 
    'value' => date('d-M-Y', strtotime('+2 days')),,
    'options' => ['placeholder' => 'Select issue date ...'],
    'pluginOptions' => [
        'format' => 'dd-M-yyyy',
        'todayHighlight' => true
    ]
]);

The TimePicker widget allows you to easily select a time for a text input using your mouse or keyboards arrow keys. The widget is a wrapper enhancement of the TimePicker plugin by rendom forked from jdewit's TimePicker. This widget as used here has been specially enhanced for Yii framework 2.0 and Bootstrap library.

Usage:

use kartik\widgets\TimePicker

// usage without model
echo '<label>Event Time</label>';
echo TimePicker::widget([
    'name' => 'event-time', 
    'pluginOptions' => [
        'minuteStep' => 1,
        'showSeconds' => true,
        'showMeridian' => false
    ]
]);

DateTimePicker widget is a Yii2 wrapper for the Bootstrap DateTimePicker plugin by smalot. The plugin is a fork of the DatePicker plugin by @eternicode and adds the time functionality. This widget is specially styled for Yii framework 2.0 and Bootstrap library. The widget is similar to the DatePicker widget in most aspects, except that it adds the time functionality and does not support ranges. The widget allows graceful degradation to a normal HTML text input, if the browser does not support JQuery. This widget supports these markups:

• Simple Input Markup
• Component Markup - Addon Prepended
• Component Markup - Addon Appended
• Inline / Embedded Markup

Usage:

use kartik\widgets\DateTimePicker

// usage without model
echo '<label>Operation Time</label>';
echo DatePicker::widget([
    'name' => 'operation_time', 
    'value' => date('d-M-Y g:i A', strtotime('+2 days')),,
    'options' => ['placeholder' => 'Select operating time ...'],
    'convertFormat' => true,
    'pluginOptions' => [
        'format' => 'd-M-Y g:i A',
        'todayHighlight' => true
    ]
]);

The TouchSpin widget is a Yii 2 wrapper for for the bootstrap-touchspin plugin by István Ujj-Mészáros, with certain additional enhancements. This input widget is a mobile and touch friendly input spinner component for Bootstrap library. You can use the widget buttons to rapidly increase and decrease numeric and/or decimal values in your input field. The widget can be setup to include model validation rules for the related model attribute.

Usage:

use kartik	ouchspin\TouchSpin

echo TouchSpin::widget([
    'name' => 'volume',
    'options' => ['placeholder' => 'Adjust...'],
    'pluginOptions' => ['step' => 1]
]);

The FileInput widget is a wrapper for the Bootstrap File Input JQuery Plugin designed by Krajee. This plugin enhances the HTML 5 file input for Bootstrap 5.x / 4.x / 3.x with HTML multiple file input, file preview for various file types (images, text, html, video, audio, flash, and objects), and more. The widget enhances the default HTML file input with various features including the following:

• Specially styled for Bootstrap library with customizable buttons, caption, and preview
• Ability to select and preview multiple files
• Includes file browse and optional remove and upload buttons.
• Ability to format your file picker button styles
• Ability to preview files before upload - images and/or text (uses HTML5 FileReader API)
• Ability to preview multiple files of different types (both images and text)
• Set your upload action/route (defaults to form submit). Customize the Upload and Remove buttons.
• Internationalization enabled for easy translation to various languages

The widget runs on all modern browsers supporting HTML5 File Inputs and File Processing API. For browsers not supporting Javascript/Jquery this widget will gracefully degrade to normal HTML file input.

Usage:

use kartik\widgets\FileInput
echo FileInput::widget([
    'name' => 'attachments', 
    'options' => ['multiple' => true], 
    'pluginOptions' => ['previewFileType' => 'any']
]);

The ColorInput widget is an advanced ColorPicker input styled for Bootstrap. It uses a combination of the HTML5 color input and/or the JQuery Spectrum Plugin for rendering the color picker. You can use the Native HTML5 color input by setting the useNative option to true. Else, the Spectrum plugin polyfills for unsupported browser versions. The widget enhances the plugin and color input with various features including the following:

• Specially styled for Bootstrap library with customizable caption showing the output of the control.
• Ability to prepend and append addons.
• Allow the input to be changed both via the control or the text box.
• The Spectrum plugin automatically polyfills the HTML5 color input for unsupported browser versions.

Usage:

use kartik\color\ColorInput
echo ColorInput::widget([
    'name' => 'color', 
    'options' => ['placeholder' => 'Select color...']
]);

The RangeInput widget is a customized range slider control widget based on HTML5 range input. The widget enhances the default HTML range input with various features including the following:

• Specially styled for Bootstrap library with customizable caption showing the output of the control.
• Ability to prepend and append addons.
• Allow the input to be changed both via the control or the text box.
• Automatically degrade to normal text input for unsupported Internet Explorer versions.

Usage:

use kartik
ange\RangeInput
echo RangeInput::widget([
    'name' => 'brightness',
    'html5Options' => ['min' => 0, 'max' => 1, 'step' => 1],
    'options' => ['placeholder' => 'Control brightness...'], 
    'addon' => ['append' => ['content' => '%']],
]);

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 library.

Usage:

use kartik\widgets\SwitchInput
echo SwitchInput::widget([
    'name' => 'activation_status',
    'pluginOptions' => ['size' => 'large']
]);

The StarRating widget is a wrapper for the Bootstrap Star Rating JQuery Plugin designed by Krajee. This plugin is a simple yet powerful JQuery star rating plugin for Bootstrap. Developed with a focus on utlizing pure CSS-3 styling to render the control.

Usage:

use kartik\widgets\StarRating
echo StarRating::widget([
    'name' => 'rating',
    'pluginOptions' => ['size' => 'lg']
]);

The Spinner widget is a wrapper for the spin.js plugin. It enables you to add an animated CSS3 loading spinner which allows VML fallback for IE. Since, it is not image based (relies on pure CSS), it allows you to configure the spinner style, size, color, and other CSS attributes. The major advantage of using the CSS3 based spinner, is that the animation can be made visible to user for non-ajax based scenarios on most modern browsers. For example, on events like window.load or window.unload (thereby enabling you to show a page loading progress without using ajax).

Usage:

use kartik\widgets\Spinner;
echo Spinner::widget(['preset' => 'large', 'align' => 'left']);

The SideNav widget is a collapsible side navigation menu built to seamlessly work with Bootstrap framework. It is built over Bootstrap stacked nav component. This widget class extends the Yii Menu widget. Upto 3 levels of submenus are by default supported by the CSS styles. You can choose to extend it to more levels by customizing the CSS. page loading progress without using ajax).

Usage:

use kartik\sidenav\SideNav;
echo SideNav::widget(['type' => SideNav::TYPE_SUCCESS, 'items' => [
    ['label' => 'Home', 'icon' => 'home', 'url' => Url::to(['/site/home', 'type'=>$type]), 'active' => ($item == 'home')],
    ['label' => 'Books', 'icon' => 'book', 'items' => [
        ['label' => '<span class="pull-right float-right float-end badge">10</span> New Arrivals', 'url' => Url::to(['/site/new-arrivals', 'type'=>$type]), 'active' => ($item == 'new-arrivals')],
        ['label' => '<span class="pull-right float-right float-end badge">5</span> Most Popular', 'url' => Url::to(['/site/most-popular', 'type'=>$type]), 'active' => ($item == 'most-popular')],
        ['label' => 'Read Online', 'icon' => 'cloud', 'items' => [
            ['label' => 'Online 1', 'url' => Url::to(['/site/online-1', 'type'=>$type]), 'active' => ($item == 'online-1')],
            ['label' => 'Online 2', 'url' => Url::to(['/site/online-2', 'type'=>$type]), 'active' => ($item == 'online-2')]
        ]],
    ]],
]);

This widget offers an easy method to embed a Bootstrap alert on your page with various configurable options. The widget extends the \yii\bootstrap\Alert class with additional features and enhancements:

• Alert Types: Easily set an alert style through the type property. Adds two new types other than the 4 standard bootstrap alert types.

• Icon & Title Section: Ability to set a stylish title separator section and add an icon and title for each alert as a header.

• Fade: Ability to set a fade duration to automatically fade out the alerts after display.

Usage:

use kartik\widgets\Alert;

echo Alert::widget([
    'type' => Alert::TYPE_INFO,
    'title' => 'Note',
    'titleOptions' => ['icon' => 'info-sign'],
    'body' => 'This is an informative alert'
]);

A widget that turns standard Bootstrap alerts into "Growl-like" notifications. This widget is a wrapper for the Bootstrap Growl plugin by remabledesigns. The widget offers various features including

• Alert Positioning: Position and align growl notifications at any corner of your page.

• Icon & Title Section: Ability to set a stylish title separator section and add an icon and title for each alert as a header.

• Fade: Ability to set a fade duration to automatically fade out the alerts after display.

• Plugin Configuration: Ability to configure various options by passing parameters to the JQuery plugin.

Usage:

use kartik\widgets\Growl;

echo Growl::widget([
    'type' => Growl::TYPE_SUCCESS,
    'icon' => 'fas fa-check-circle',
    'title' => 'Note',
    'showSeparator' => true,
    'body' => 'This is a successful growling alert.'
]);

The Alert Block widget provides ability to groups multiple \kartik\widget\Alert or kartik\widget\Growl widgets in a single block. The widget by default stacks the alert messages vertically on the current page. The widget offers the following features:

• Session Flashes: The widget automatically reads the messages stored in session flash via Yii::$app->session->setFlash(). All the flash messages stored for the session are displayed and removed from the session.

• Custom Stacked Alerts: You can override the useSessionFlash setting to false and display your own alert messages in a single block.

• Alert Widget Types: You can choose the TYPE_ALERT style or the TYPE_GROWL to choose the widget for triggering your alert notifications.

Usage:

use kartik\widgets\AlertBlock;

echo AlertBlock::widget([
    'type' => AlertBlock::TYPE_ALERT,
    'useSessionFlash' => true
]);