Yii2 Widgets

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 yii2-widgets package is a collection of useful widgets for Yii Framework 2 extending functionalities for Bootstrap 3.x, with added jQuery plugins, CSS3, and HTML 5 features. The widgets have been specifically optimized for Yii 2 and categorized as input widgets, progress widgets, navigation widgets, and notification widgets.

This extension has now matured to contain the most needed basic widgets for Yii 2 input and navigation controls. In order to support this extension better, any additional input and navigation widgets will be created separately. Listed below are the additional widgets that are related to similar functionality like the yii2-widgets, but have been created as separate extensions (these widgets depend on kartik-v/yii2-widgets).

  • yii2-dropdown-x: Extended Bootstrap 3 dropdown menu for Yii 2.0

  • yii2-nav-x: Extended Bootstrap 3 navigation menu for Yii 2.0

  • yii2-context-menu: Bootstrap 3 context menu for Yii 2.0

  • yii2-slider: Bootstrap 3 Slider control for Yii 2.0

  • yii2-sortable: Create sortable lists and grids using simple drag and drop.

  • yii2-sortable-input: Input widget for yii2-sortable allowing you to store the sort order.

  • yii2-money: Masked money input widget for Yii 2.0.

  • yii2-checkbox-x: Bootstrap 3 extended checkbox widget with 3 states and more styles for Yii 2.0.

  • yii2-date-range: An extended bootstrap 3 date range picker widget for Yii 2.0.

These widgets allow you to capture and process user inputs (typically via a form). Most of the widgets in this category extend the \kartik\widgets\InputWidget class, which in turn extends the \yii\widgets\InputWidget class.

This widget class extends the Yii ActiveForm widget by adding Bootstrap 3.0 features and functionality. More enhancements are available through kartik\widgets\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\widgets\ActiveForm;
$form = kartik\widgets\ActiveForm::begin(
[
    'id' => 'signup-form',
    'enableAjaxValidation' => true,
    'fieldConfig' => [
	    'autoPlaceholder'=>true
    ]
]);

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

Usage:

View details and demos. Also, view a complete demo on HTML5 inputs.

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

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\widgets\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 by Igor Vaynberg. 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 3. 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.

Usage:

use kartik\widgets\Select2

// usage with ActiveForm and model
echo $form->field($model, 'state_1')->widget(Select2::classname(), [
    'language' => 'de',
    'data' => array_merge(["" => ""], $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 3. 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.

Note

This widget is a basic implementation of the typeahead.js without any suggestion engine. It uses a javascript substring matcher and Regular Expression matching to query the data.

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

Note

This widget is an advanced implementation of the typeahead.js plugin with the BloodHound suggestion engine and the Handlebars template compiler.

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

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 3. 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 '&lt;label&gt;Operation Time&lt;/label&gt;';
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 3. 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\widgets\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 3.x with file preview for images and text, multiple selection, and more. The widget enhances the default HTML file input with various features including the following:

  • Specially styled for Bootstrap 3.0 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:

File Input Screenshot
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 3.0 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\widgets\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 3.0 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\widgets\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 3.

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']
]);

These widgets allow you to display and control progress indicators on your UI.

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']);

These widgets provide navigation aids in form of menus, dropdowns, and navigation bars, which allow you to navigate through pages and content in your application.

This widget offers a scrollspy and affixed enhanced navigation (upto 2-levels) to highlight sections and secondary sections in each page. This widget class extends the Yii Menu widget. The affix widget can be used to generate both the:

  • Sidebar Menu: Displays the scrollspy/affix navigation menu as a sidebar
  • and/or
  • Main Body: Displays the main body sections based on the section & subsection headings and content passed.
The parameters to pass are:
  • type: The affix content type. Must be either menu or body. Defaults to menu.
  • items: The affix content items as an array.

Note

If you have the header section fixed to the top, you must add a CSS class kv-header to the header container. Similarly, for a fixed footer you must add the class kv-footer to your footer container. This will ensure a correct positioning of the affix navigation widget on the page.

Usage:

use kartik\widgets\Affix;
<div class="row">
    <div class="col-sm-3">
        <?php
        echo Affix::widget([
            'items' => $items
        ]);?>
    </div>
    <div class="col-sm-9">
        <?php
        echo Affix::widget([
            'type' => 'body',
            'items' => $items
        ]);?>
    </div>
</div>

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

Usage:

View details or a complete demo.

use kartik\widgets\SideNav;

echo SideNav::widget([
    'type' => SideNav::TYPE_DEFAULT,
    'heading' => 'Options',
    'items' => [
        [
            'url' => '#',
            'label' => 'Home',
            'icon' => 'home'
        ],
        [
            'label' => 'Help',
            'icon' => 'question-sign'
            'items' => [
                 ['label' => 'About', 'icon'=>'info-sign', 'url'=>'#'],
                 ['label' => 'Contact', 'icon'=>'phone', 'url'=>'#'],
            ],
        ],
    ],
]);

These widgets provide ability to display notifications on pages to users via alerts, pop-up messages, etc..

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' => 'glyphicon glyphicon-ok-sign',
	'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
]);