Global Bootstrap Version

Generally, you may also want to set a default version globally for all Krajee Extensions (instead of setting it for each widget or extension separately). In order to do this, you can setup the bsVersion property within Yii 2 application params (i.e. Yii::$app->params['bsVersion']). To set this up, add this section of code to your application params configuration file (e.g. config/params.php):

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

If ActiveForm::bsVersion property is set, in addition to Yii::$app->params['bsVersion'], the extension level setting (ActiveForm::bsVersion property) will override the Yii::$app->params['bsVersion']. If ActiveForm::bsVersion property is not set, and Yii::$app->params['bsVersion'] is also not set, ActiveForm::bsVersion property will default to 3.x (i.e. Bootstrap 3.x version will be assumed as default).

Yii2 Bootstrap Dependency

You need to install one of yiisoft/yii2-bootstrap or yiisoft/yii2-bootstrap4 or yiisoft/yii2-bootstrap5 extensions manually in your application to enable Bootstrap 3.x or 4.x or 5.x functionality respectively. This dependency has not been pre-built into the composer configuration for Krajee extensions, to allow better control to the developers in configuring their bootstrap library version. If bsVersion is set to 5.x and yiisoft/yii2-bootstrap5 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap5 extension. If bsVersion is set to 4.x and yiisoft/yii2-bootstrap4 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap4 extension. Similarly, if bsVersion is set to 3.x and yiisoft/yii2-bootstrap is not installed, an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap extension.

To install yiisoft/yii2-bootstrap5, add the repo to the require section of your application's composer.json.

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

To install yiisoft/yii2-bootstrap4, add the repo to the require section of your application's composer.json.

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

To install yiisoft/yii2-bootstrap, add the repo to the require section of your application's composer.json.

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

Override Bootstrap CSS/JS

The Krajee extension asset bundle(s) by default depend on one of the following asset bundles to load the Bootstrap CSS and JS:

• yii\bootstrap\BootstrapAsset and/or yii\bootstrap\BootstrapPluginAsset for bootstrap 3.x (bsVersion = 3 setting)

• yii\bootstrap4\BootstrapAsset and/or yii\bootstrap4\BootstrapPluginAsset for bootstrap 4.x ( bsVersion = 4 setting)

• yii\bootstrap5\BootstrapAsset and/or yii\bootstrap5\BootstrapPluginAsset for bootstrap 5.x (bsVersion = 5 setting)

This is controlled by the property bsDependencyEnabled within the asset bundle (which defaults to true). One can override this and prevent the default yii2 bootstrap assets (CSS & JS) from loading by doing one or all of the following:

• Global Override: Set Yii::$app->params['bsDependencyEnabled'] to false in your Yii 2 application config params.php. This setting will be applied for all Krajee Extension Asset Bundles that depend on Bootstrap assets.

  'params' => [
      'bsDependencyEnabled' => false, // this will not load Bootstrap CSS and JS for all Krajee extensions
      // you need to ensure you load the Bootstrap CSS/JS manually in your view layout before Krajee CSS/JS assets
      //
      // other params settings below
      // 'bsVersion' => '5.x',
      // 'adminEmail' => 'admin@example.com'
  ]
  

• Asset Bundle Specific Override: Set bsDependencyEnabled to false for the specific asset bundle within Yii2 Asset Manager component in your Yii 2 application config file.

  // ...
  'components' => [
      'assetManager' => [
          'bundles' => [
              'kartik\form\ActiveFormAsset' => [
                  'bsDependencyEnabled' => false // do not load bootstrap assets for a specific asset bundle
              ],
          ],
      ],
  ],
  

Icons for Bootstrap

Bootstrap 5.x / 4.x does not include glyphicons or any other icons framework bundled with the library. Krajee extensions therefore will use Font Awesome 5.x icons instead of glyphicons when working with Bootstrap 5.x / 4.x. You can download Font Awesome 5.x icons from the icons website. Alternatively, you can load the free version of Font Awesome from their CDN.

For Krajee extensions and demos, the Font Awesome Free version is used and loaded as the Icons Display Package on all the Yii2 demo layouts. To include font awesome assets on your page, include the following markup on the HEAD section of your view layout file, when bsVersion is set to 4.x or 5.x.

• Option 1: Font CSS version of Font Awesome:

  <!-- on your view layout file HEAD section -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  

• Option 2: SVG / JS version of Font Awesome (recommended for cleaner scaling vector icons and features like icon layers):

  <!-- on your view layout file HEAD section -->
  <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" crossorigin="anonymous"></script>
  

  Alternatively, you can use the FontAwesomeAsset from the kartik-v/yii2-icons package to load the SVG/JS version.

  // on your view layout file
  use kartik\icons\FontAwesomeAsset;
  FontAwesomeAsset::register($this);
  

addClass

string, the additional CSS classname to append to the input. Defaults to 'form-control'.

addon

The bootstrap input group addon configuration. Typically supported for input, select, and password inputs. The following settings can be configured:

• prepend: array the prepend addon configuration, where you set the following keys:

  • content: string the prepend addon content

  • asButton: boolean whether the addon is a button or button group. Defaults to false.

  • options: array HTML attributes for the prepend addon

• append: array the append addon configuration, where you set the following keys:

  • content: string the append addon content

  • asButton: boolean whether the addon is a button or button group. Defaults to false.

  • options: array HTML attributes for the append addon

• groupOptions: array HTML options for the input group

• contentBefore: string content placed before addon. This is not HTML encoded.

• contentAfter: string content placed after addon. This is not HTML encoded.

autoPlaceholder

boolean, whether the label is to be hidden and auto-displayed as a placeholder. Defaults to false for vertical/horizontal forms and true for inline forms.

autoOffset

boolean, whether to auto offset toggle inputs (checkboxes / radios) horizontal form layout for BS 4.x forms. This will read the labelSpan and automatically offset the checkboxes/radios. Defaults to true.

checkEnclosedTemplate

string, the template for rendering checkboxes and radios for a default Bootstrap markup with an enclosed label. Defaults to:

{beginLabel}\n{input}\n{labelTitle}\n{endLabel}\n{error}\n{hint}

checkTemplate

string, the template for rendering checkboxes and radios for a default Bootstrap markup without an enclosed label. Defaults to:

{input}\n{label}\n{error}\n{hint}

checkWrapperOptions

array, the HTML attributes for the container wrapping BS4 checkbox or radio controls within which the content will be rendered via the checkTemplate or checkEnclosedTemplate. Defaults to an empty array []. The extension automatically parse for Bootstrap 5.x / 4.x / 3.x styles and add the necessary CSS classes to the checkbox/radio wrapper container.

contentBeforeError

string, the content to be placed before the error. Defaults to an empty string ''.

contentAfterError

string, the content to be placed after the error. Defaults to an empty string ''.

contentBeforeField

string, the content to be placed before the field within the form group at the beginning. Defaults to an empty string ''.

contentAfterField

string, the content to be placed after the field within the form group at the end. Defaults to an empty string ''.

contentBeforeHint

string, the content to be placed before the hint. Defaults to an empty string ''.

contentAfterHint

string, the content to be placed after the hint. Defaults to an empty string ''.

contentBeforeInput

string, the content to be placed before the input. Defaults to an empty string ''.

contentAfterInput

string, the content to be placed after the input. Defaults to an empty string ''.

contentBeforeLabel

string, the content to be placed before the label. Defaults to an empty string ''.

contentAfterLabel

string, the content to be placed after the label. Defaults to an empty string ''.

customFileTemplate

string, the template for rendering the Bootstrap 5.x / 4.x custom file browser control. Defaults to:

<div class="custom-file">\n{input}\n{label}\n</div>\n{error}\n{hint}

deviceSize

string, one of the bootstrap size modifiers as mentioned below:

• ActiveForm::SIZE_XS or 'xs': Extra Small size

• ActiveForm::SIZE_SM or 'sm': Small size

• ActiveForm::SIZE_MD or 'md': Medium size

• ActiveForm::SIZE_LG or 'lg': Large size

• ActiveForm::SIZE_XL or 'xl': Extra Large size

enableError

boolean, whether to render the error. Defaults to true except for inline form layout type.

enableLabel

boolean, whether to render the label. Defaults to true.

feedbackIcon

array, the configuration for the feedback icon (applicable for bootstrap text inputs). This must be setup as an array containing the following keys:

• type: string, the icon type to use. Should be one of raw or icon. Defaults to icon, where the default, error and success settings will be treated as an icon CSS suffix name. If set to raw, they will be treated as a raw content markup.

• prefix: string, the icon CSS class prefix to use if type is icon. Defaults to fas fa-.

• default: string, the icon (CSS class suffix name or raw markup) to show by default. If not set will not be shown.

• error: string, the icon (CSS class suffix name or raw markup) to use when input has an error validation. If not set will not be shown.

• success: string, the icon (CSS class suffix name or raw markup) to use when input has a success validation. If not set will not be shown.

• defaultOptions: array, the HTML attributes to apply for default icon. The special attribute description can be set to describe this feedback as an aria attribute for accessibility. Defaults to (default).

• errorOptions: array, the HTML attributes to apply for error icon. The special attribute description can be set to describe this feedback as an aria attribute for accessibility. Defaults to (error).

• successOptions: array, the HTML attributes to apply for success icon. The special attribute description can be set to describe this feedback as an aria attribute for accessibility. Defaults to (success).

highlightAddon

boolean, whether to highlight error and success states using Bootstrap 5.x / 4.x / 3.x styles on input group addons automatically. Defaults to true.

hintSettings

array, the settings for displaying the hint. These settings are parsed only if hintType is set to ActiveField::HINT_SPECIAL. The following settings are supported:

• showIcon: boolean, whether to display the hint via a help icon indicator. Defaults to true.

• icon: string, the markup to display the help icon. Defaults to:

  • <i class="fas fa-question-sign text-info"></i> for Bootstrap 5.x / 4.x / 3.x.

  • <i class="fas fa-question-circle text-info"></i> for Bootstrap 5.x / 4.x.

• iconBesideInput: boolean, whether to display the icon beside the input. Defaults to false. The following actions will be taken based on this setting:

  • if set to false the help icon is displayed beside the label and the labelTemplate setting is used to render the icon and label markups.

  • if set to true the help icon is displayed beside the input and the inputTemplate setting is used to render the icon and input markups.

• labelTemplate: string, the template to render the help icon and the field label. Defaults to {label}{help}, where:

  • {label} will be replaced by the ActiveField label content.

  • {help} will be replaced by the help icon indicator markup.

• inputTemplate: string, the template to render the help icon and the field input. Defaults to:

  '<div style="width:90%; float:left">{input}</div><div style="padding-top:7px">{help}</div>'

  where:

  • {input} will be replaced by the ActiveField input content

  • {help} will be replaced by the help icon indicator markup

• onLabelClick: boolean, whether to display the hint on clicking the label. Defaults to false.

• onLabelHover: boolean, whether to display the hint on hover of the label. Defaults to true.

• onIconClick: boolean, whether to display the hint on clicking the icon. Defaults to true.

• onIconHover: boolean, whether to display the hint on hover of the icon. Defaults to false.

• iconCssClass: string, the CSS class appended to the span container enclosing the icon.

• labelCssClass: string, the CSS class appended to the span container enclosing label text within label tag.

• contentCssClass: string, the CSS class appended to the span container displaying help content within popover.

• hideOnEscape: boolean, whether to hide the popover on clicking escape button on the keyboard. Defaults to true.

• hideOnClickOut: boolean, whether to hide the popover on clicking outside the popover. Defaults to true.

• title: string, the title heading for the popover dialog. Defaults to empty string, whereby the heading is not displayed.

• placement: string, the placement of the help popover on hover or click of the icon or label. Defaults to top.

• container: string, the specific element to which the popover will be appended to. Defaults to table when iconBesideInput within hintSettings is set to true, else defaults to form

• animation: boolean, whether to add a CSS fade transition effect when opening and closing the popover. Defaults to true.

• delay: integer|array, the number of milliseconds it will take to open and close the popover. Defaults to 0.

• selector: integer, the specified selector to add the popover to. Defaults to boolean false.

• viewport: string|array, the element within which the popover will be bounded to. Defaults to ['selector' => 'body', 'padding' => 0].

hintType

integer, the hint display type. If set to ActiveField::HINT_DEFAULT, the hint will be displayed as a text block below each input. If set to ActiveField::HINT_SPECIAL, then the hintSettings will be applied to display the field hint. Defaults to ActiveField::HINT_DEFAULT.

horizontalCssClasses

array, CSS grid classes for horizontal layout. This must be setup as an array with these keys:

• offset: string, the offset grid class to append to the wrapper if no label is rendered

• label: string, the label grid class

• wrapper: string, the wrapper grid class

• error: string, the error grid class

• hint: string, the hint grid class

These options are compatible and similar to \yii\bootstrap\ActiveForm and/or \yii\bootstrap5\ActiveForm and provide a complete flexible container. If labelSpan is set in ActiveForm::formConfig and wrapper is also set, then both css options are concatenated. If wrapper contains a 'col-' class wrapper, it overrides the tag from labelSpan.

labelSpan

integer, the bootstrap grid column width (usually a number between 1 to 12).

renderEmptyWrapper

boolean, whether to render the wrapper in the template if wrapperOptions is empty. Defaults to true.

showErrors

boolean, whether to show errors for the field. Defaults to the showErrors setting within \kartikorm\ActiveForm::formConfig for the configured form type.

showHints

boolean, whether to show hints for the field. Defaults to the showHints setting within \kartikorm\ActiveForm::formConfig for the configured form type.

showLabels

boolean|string, whether to show labels for the field. Defaults to the showLabels setting within \kartikorm\ActiveForm::formConfig for the configured form type. Should be one of the following values:

• true: shows labels for the field.

• false: hides labels for the field.

• ActiveForm::SCREEN_READER: shows labels in screen reader only (hide from normal display).

showRequiredIndicator

boolean, whether to show required asterisk/star indicator after each field label when the model attribute is set to have a required validation rule. Defaults to true. This will add a CSS class has-star to the label and show the required asterisk/star after the label based on CSS ::after styles. If you want any other label markup to show a required asterisk for a required model attribute field, then just add the CSS class has-star to the label/span markup element within the active field container with CSS class form-group mb-3.

NOTE: You can also alternatively add the CSS class is-required to force any label / markup to show a red asterisk/star after the content.

skipFormLayout

boolean, whether to override the form layout styles and skip field formatting as per the form layout. Defaults to false.

staticValue

string, the static value for the field to be displayed for the static input OR when the form is in staticOnly mode. This value is not HTML encoded.

template

string, the active field markup template. Inherits and overrides values from parent class. This defaults to:

{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}

The following tokens are supported:

• {beginLabel}: Container begin tag for labels (to be used typically along with {labelTitle} token, when you do not wish to directly use the {label} token).

• {labelTitle}: Label content without tags (to be used typically when you do not wish to directly use the {label} token).

• {endLabel}: Container end tag for labels (to be used typically with {labelTitle} token, when you do not wish to directly use the {label} token).

• {label}: Full label content enclosed within the label tag.

• {beginWrapper}: Container for input,error and hint start tag. Uses a <div> tag if there is a input wrapper CSS detected, else defaults to empty string.

• {input}: placeholder for input control

• {hint}: placeholder for hint/help text including sub container

• {error}: placeholder for error text including sub container

• {endWrapper}: end tag for {beginWrapper}. Defaults to </div>, if there is a input wrapper CSS detected, else defaults to empty string.

wrapperOptions

array,options for the wrapper tag, used in the {beginWrapper} token within template.

echo $form->field($model, 'email', [
    'addon' => ['prepend' => ['content'=>'@']]
]);

echo $form->field($model, 'amount_paid', [
    'addon' => ['append' => ['content'=>'.00']],
]);

echo $form->field($model, 'phone', [
    'addon' => ['prepend' => ['content'=>'<i class="fas fa-mobile-alt"></i>']]
]);

echo $form->field($model, 'include_text', [
    'addon' => ['prepend' => ['content'=>'<input type="checkbox">']]
]);

echo $form->field($model, 'username', [
    'addon' => [
        'append' => [
            'content' => Html::button('Go', ['class'=>'btn btn-primary']), 
            'asButton' => true
        ]
    ]
]);

kartik\bs5dropdown\ButtonDropdown
use kartik\bs5dropdown\ButtonDropdown;
echo $form->field($model, 'username', [
    'addon' => [
        'append' => [
            'content' => ButtonDropdown::widget([
                'label' => 'Action',
                'dropdown' => [
                    'items' => [
                        ['label' => 'Another action', 'url' => '#'],
                        ['label' => 'Something else', 'url' => '#'],
                        '<div class="dropdown-divider"></div>'
                        // or use following for BS3
                        // '<li class="divider"></li>',
                        ['label' => 'Separated link', 'url' => '#'],
                    ],
                ],
                'buttonOptions' => ['class'=>'btn-secondary'],
                'renderContainer' => false
            ]),
            'asButton' => true
        ]
    ]
]);

use yii\helpers\Html;
use kartik\bs5dropdown\ButtonDropdown;
echo $form->field($model, 'username', [
    'addon' => [
        'append' => [
            'content' => 
                Html::button('Car', ['class'=>'btn btn-outline-secondary']) . "
" .
                Html::button('Bus', ['class'=>'btn btn-outline-secondary']) . "
" .
                ButtonDropdown::widget([
                    'label' => 'Air',
                    'dropdown' => [
                        'items' => [
                            ['label' => 'Another action', 'url' => '#'],
                            ['label' => 'Something else', 'url' => '#'],
                            '<div class="dropdown-divider"></div>'
                            // or use following for BS3
                            // '<li class="divider"></li>',
                            ['label' => 'Separated link', 'url' => '#'],
                        ],
                    ],
                    'buttonOptions' => ['class'=>'btn-outline-secondary'],
                    'renderContainer' => false
                ]),
            'asButton' => true
        ]
    ]
]);

echo $form->field($model, 'date_1', [
    'addon' => [
        'prepend' => ['content'=>'<i class="fas fa-calendar-alt"></i>'],
        'append' => ['content'=>'<button class="btn btn-secondary btn-default">Go</button>', 'asButton'=>true]
    ]
]);

// Controlling addon HTML options
echo $form->field($model, 'amount_paid', [
    'addon' => [ 
        'prepend' => ['content' => '$', 'options'=>['class'=>'alert-success']],
        'append' => ['content' => '.00', 'options'=>['style' => 'font-family: Monaco, Consolas, monospace;']],
    ]
]);

// Displaying a SMALL input group
echo $form->field($model, 'date_2', [
    'labelOptions' => ['class' => 'col-form-label-sm'], 
    'addon' => [
        'append' => [
            ['content' => 'to'],
        ], 
        'contentAfter' => '<input type="text" id="date-to-2" class="form-control" placeholder="End Date" style="margin-left:-1px">',
        'groupOptions' => ['class'=>'input-group-sm']
    ]
]);

// Displaying a LARGE input
echo $form->field($model, 'date_3', [
    'labelOptions' => ['class' => 'col-form-label-lg'], 
    'addon' => [
        'append' => [
            ['content' => 'to'],
            '<input type="text" id="date-to" class="form-control" placeholder="End Date">'
        ], 
        'contentAfter' => '<input type="text" id="date-to-3" class="form-control" placeholder="End Date" style="margin-left:-1px">',
        'groupOptions' => ['class'=>'input-group-lg']
    ]
]);

echo $form->field($model, 'address_1', [
    'addon' => [ 
        'prepend' => [
            ['content' => '<i class="fas fa-volume-off"></i>'],
            ['content' => '<i class="fas fa-volume-down"></i>'],
            ['content' => '<i class="fas fa-volume-up"></i>'],
        ],
        'append' => [
            ['content' => '<i class="fas fa-stop"></i>'],
            ['content' => '<i class="fas fa-pause"></i>'],
            ['content' => '<i class="fas fa-play-circle"></i>'],
        ],
    ]
])->label('Music File');

Renders a checkbox input. The following parameters are supported:

• options: array, the HTML attributes in terms of name-value pairs. The following options are specially handled:

  • uncheck: string, the value associated with the uncheck state of the radio button. If not set, it will take the default value 0. This method will render a hidden input so that if the checkbox is not checked and is submitted, the value of this attribute will still be submitted to the server via the hidden input. If you do not want any hidden input, you should explicitly set this option as null.

  • label: string, a label displayed next to the checkbox. It will NOT be HTML-encoded. Therefore you can pass in HTML code such as an image tag. If this is coming from end users, you should Html::encode() or encode it to prevent XSS attacks. When this option is specified, the checkbox will be enclosed by a label tag. If you do not want any label, you should explicitly set this option as null.

  • labelOptions: array, the HTML attributes for the label tag. This is only used when the label option is specified.

  The rest of the options will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html::encode(). If a value is null, the corresponding attribute will not be rendered.

  If you set a custom id for the input element, you may need to adjust the $selectors accordingly.

• enclosedByLabel: boolean, whether to enclose the checkbox within the label. If true, the method will still use template to layout the checkbox and the error message except that the checkbox is enclosed by the label tag.

The checkbox active field includes enhancements over the yii default checkbox and handles automatic offsetting of checkbox inputs for Horizontal Forms. As an example, check the Remember Me input below.

<?php
$form = ActiveForm::begin([
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
]);
?>
<?= $form->field($model, 'username')->textInput(['id' => 'username-cbx']) ?>
<?= $form->field($model, 'password')->passwordInput(['id' => 'password-cbx']) ?>
<?= $form->field($model, 'rememberMe')->checkbox() ?>
<div class="form-group mb-3 row">
    <div class="col-sm-3"></div>
    <div class="col-sm-9">
        <?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
    </div>
</div>
<?php ActiveForm::end(); ?>

Renders a radio input. The following parameters are supported:

• options: array, the HTML attributes in terms of name-value pairs. The following options are specially handled:

  • uncheck: string, the value associated with the uncheck state of the radio button. If not set, it will take the default value 0. This method will render a hidden input so that if the radio button is not checked and is submitted, the value of this attribute will still be submitted to the server via the hidden input. If you do not want any hidden input, you should explicitly set this option as null.

  • label: string, a label displayed next to the radio. It will NOT be HTML-encoded. Therefore you can pass in HTML code such as an image tag. If this is coming from end users, you should Html::encode() or encode it to prevent XSS attacks. When this option is specified, the radio will be enclosed by a label tag. If you do not want any label, you should explicitly set this option as null.

  • labelOptions: array, the HTML attributes for the label tag. This is only used when the label option is specified.

  The rest of the options will be rendered as the attributes of the resulting tag. The values will be HTML-encoded using Html::encode(). If a value is null, the corresponding attribute will not be rendered.

  If you set a custom id for the input element, you may need to adjust the $selectors accordingly.

• enclosedByLabel: boolean, whether to enclose the radio within the label. If true, the method will still use template to layout the radio and the error message except that the radio is enclosed by the label tag.

The radio active field includes enhancements over the yii default radio and handles automatic offsetting of radio inputs for Horizontal Forms. As an example, check the Yes and No inputs below.

<?php 
$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
]); 
?>
<?= $form->field($model, 'username') ?>
<?= $form->field($model, 'password')->passwordInput() ?>
<?= $form->field($model, 'yes')->radio() ?>
<?= $form->field($model, 'no')->radio() ?>
<div class="form-group mb-3 row">
    <div class="col-sm-3"></div>
    <div class="col-sm-9">
        <?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
    </div>
</div>
<?php ActiveForm::end(); ?>

$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
]); 

$list = [0 => 'Morning', 1 => 'Noon', 2 => 'Evening'];

/* Display a stacked checkbox list */
echo $form->field($model, 'contact')->checkboxList($list);

/* Display an inline checkbox list */
echo $form->field($model, 'contact')->checkboxList($list, ['inline'=>true]);

ActiveForm::end();

$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
]); 

$list = [0 => 'Morning', 1 => 'Noon', 2 => 'Evening'];

/* Display a stacked radio list */
echo $form->field($model, 'contact')->radioList($list);

/* Display an inline radio list */
echo $form->field($model, 'contact')->radioList($list, ['inline'=>true]);

ActiveForm::end();

$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
]); 
echo $form->field($model, 'username');
echo $form->field($model, 'email')->staticInput();
ActiveForm::end();

View a complete demo on HTML5 inputs.

$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 6, 'deviceSize' => ActiveForm::SIZE_SMALL]
]); 

/* Color input - works with Firefox, Google Chrome & Opera*/
echo $form->field($model, 'color')->input('color');

/* Range input - works with Google Chrome & Opera*/
echo $form->field($model, 'brightness')->input('range', ['class' => 'form-control-range']);

/* Number input - works with Firefox, Google Chrome, Safari & Opera*/
$form->field($model, 'rating')->input('number', ['min'=>1, 'max'=>5, 'placeholder' => 'Enter a rating between 1 and 5...']) ?>

/* Date selector input - works with Google Chrome & Opera */
echo $form->field($model, 'birthday')->input('date');

ActiveForm::end();

$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_VERTICAL
]); 
echo $form->field($model, 'select_data')->multiselect($model->icons);
ActiveForm::end();

$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_HORIZONTAL,
    'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
]);
echo $form->field($model, 'select_data')->multiselect($model->icons);
ActiveForm::end();

$form = ActiveForm::begin([
    'id' => 'login-form'
]); 
echo $form->field($model, 'select_data')->multiselect($model->icons, ['selector'=>'radio']);
ActiveForm::end();

$form = ActiveForm::begin([
    'id' => 'login-form', 
    'type' => ActiveForm::TYPE_VERTICAL
]); 
echo $form->field($model, 'select_data')->multiselect($model->icons, [
    'height' => '225px',
    'container' => ['class' => 'bg-white']
]);
ActiveForm::end();