ActiveForm 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 ActiveForm::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set ActiveForm::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 ActiveForm::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 ActiveForm::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-activeform extension can be installed automatically or manually using one of these options:

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

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

All settings and properties for \yii\widgets\ActiveForm can be used in this widget. In addition the additional properties available with \kartik\form\ActiveForm are:

• 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: string, form orientation type as supported for Bootstrap library styling. Must be one of the following values:

  • 'vertical' or ActiveForm::TYPE_VERTICAL

  • 'horizontal' or ActiveForm::TYPE_HORIZONTAL

  • 'inline' or ActiveForm::TYPE_INLINE

  • 'floating' or ActiveForm::TYPE_FLOATING (for Bootstrap 5.x only)

• fullSpan: int, the Bootstrap full span grid width. Defaults to 12. You can override for custom grid layouts.

• formConfig: array, the additional configuration for the form widget. The following properties are supported

  • labelSpan: int, the grid width for the label part when the form type is of ActiveForm::TYPE_HORIZONTAL orientation. Should be a number between 1 and fullSpan. Defaults to 2. This is useful in HORIZONTAL forms for setting the label width and offsetting the input.

  • deviceSize: int, the device size to render the grid columns for. Should be one of the bootstrap size modifiers below. Defaults to ActiveForm::SIZE_MEDIUM.

    • 'xs' or ActiveForm::SIZE_X_SMALL

    • 'sm' or ActiveForm::SIZE_SMALL

    • 'md' or ActiveForm::SIZE_MEDIUM

    • 'lg' or ActiveForm::SIZE_LARGE

    • 'xl' or ActiveForm::SIZE_X_LARGE

    This is useful again in HORIZONTAL forms for setting the device size.

  • showLabels: boolean | string. Whether to show field labels. Should be one of the following values:

    • true: show labels for fields

    • false: hide labels for fields

    • ActiveForm::SCREEN_READER: show in screen reader only (hide from normal display)

    Defaults to true. This is useful in INLINE forms, where it defaults to ActiveForm::SCREEN_READER. The autoPlaceholder property for INLINE forms in fieldConfig is defaulted to true.

  • showErrors: boolean, whether to show yii field validation errors. Defaults to true, except for INLINE forms where it defaults to false.

  • showHints: boolean, whether to show hints for each field. Defaults to true. The hint will be rendered only if a valid hint has been set through the hint() method.

• staticOnly: boolean | Closure, whether all inputs in form are to be rendered as bootstrap 5 static text inputs. Defaults to false. This property takes precedence over disabled or readonly.

  For advanced configuration (e.g. dynamically setting different flags for different fields), this can be setup as a Closure callback. When setup as a Closure callback, you can receive the model instance and the active field object instance as parameters. For example:

  'staticOnly' => function ($model, $field) {
      return in_array($field->attribute, $model->staticOnlyAttributes());
  }
  

• disabled: boolean, | Closure, whether all inputs in form are to be disabled. Defaults to false.

  For advanced configuration (e.g. dynamically setting different flags for different fields), this can be setup as a Closure callback. When setup as a Closure callback, you can receive the model instance and the active field object instance as parameters. For example:

  'disabled' => function ($model, $field) {
      return in_array($field->attribute, $model->disabledAttributes());
  }
  

• readonly: boolean, | Closure, whether all inputs in form are to be readonly. Defaults to false.

  For advanced configuration (e.g. dynamically setting different flags for different fields), this can be setup as a Closure callback. When setup as a Closure callback, you can receive the model instance and the active field object instance as parameters. For example:

  'readonly' => function ($model, $field) {
      return in_array($field->attribute, $model->readonlyAttributes());
  }
  

For example, compare the inline form in the previous section above and the one below.

No validation error messages are shown on the inline-form in the previous section (the default behavior). While in the inline-form below, with showErrors set to true in formConfig, the validation errors are displayed.

TIP To easily display a validation error just click in and out of the username or password fields.

Active Field Configuration

The following properties of the ActiveField will help configure the layout specially in combination with and/or without the settings above:

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

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

  • label: the label grid class

  • wrapper: the wrapper grid class

  • error: the error grid class

  • hint: the hint grid class

  These options are compatible and similar to \yii\bootstrap\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.

• template: string, inherits and overrides values from parent class. This defaults to {label} {beginWrapper} {input} {hint} {error} {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.

A few examples of configuring a custom template for your bootstrap horizontal active form could look like:

// with labelSpan and deviceSize
echo $form->->field($model, 'email', ['labelSpan' => 2, 'deviceSize' => ActiveForm::SIZE_SMALL]]);

// using horizontalCssClasses
echo $form->->field($model, 'amount_paid', ['horizontalCssClasses' => ['wrapper' => 'hidden-xs']]);
echo $form->->field($model, 'phone', [
    'horizontalCssClasses' => ['label' => 'col-md-2 col-sm-3 col-xs-12 myRedClass']
]);

// using template 
echo $form->->field($model, 'special', [
    'template' => '{beginLabel}For: {labelTitle}{endLabel}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}'
]);
 

Generates a vertical form orientation. You need to set the type parameter to ActiveForm::TYPE_VERTICAL.

You can set formConfig additionally as:

• showLabels: boolean | string. Whether to show field labels. Should be one of the following values:

  • true: show labels for fields

  • false: hide labels for fields

  • ActiveForm::SCREEN_READER: show in screen reader only (hide from normal display)

<?php 
    use kartik\form\ActiveForm; // or kartik\widgets\ActiveForm
    $form = ActiveForm::begin([
        'id' => 'login-form-vertical', 
        'type' => ActiveForm::TYPE_VERTICAL
    ]); 
?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password')->passwordInput() ?>
    <?= $form->field($model, 'rememberMe')->checkbox(['custom' => true]) ?>
    <div class="form-group mb-3">
        <?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
        <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
    </div>
<?php ActiveForm::end(); ?>

Generates a horizontal form orientation as set in type. You need to set the type parameter to ActiveForm::TYPE_HORIZONTAL.

The available formConfig options are:

• labelSpan The numeric grid width of the label part (integer between 1 to 12)
• deviceSize Applicable device size (one of the ActiveForm size constants below). Check the bootstrap grid class prefix for more details.

  • 'xs' or ActiveForm::SIZE_X_SMALL

  • 'sm' or ActiveForm::SIZE_SMALL

  • 'md' or ActiveForm::SIZE_MEDIUM

  • 'lg' or ActiveForm::SIZE_LARGE

  • 'xl' or ActiveForm::SIZE_X_LARGE

<?php 
    use kartik\form\ActiveForm; // or kartik\widgets\ActiveForm
    $form = ActiveForm::begin([
        'id' => 'login-form-horizontal', 
        'type' => ActiveForm::TYPE_HORIZONTAL,
        'formConfig' => ['labelSpan' => 3, 'deviceSize' => ActiveForm::SIZE_SMALL]
    ]); 
?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password')->passwordInput() ?>
    <?= $form->field($model, 'rememberMe')->checkbox(['id' => 'remember-me-hor', 'custom' => true]) ?>
    <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 mr-1']) ?>
            <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
        </div>
    </div>
<?php ActiveForm::end(); ?>

<?php 
    use kartik\form\ActiveForm; // or kartik\widgets\ActiveForm
    $form = ActiveForm::begin([
        'id' => 'login-form-inline', 
        'type' => ActiveForm::TYPE_INLINE,
        'fieldConfig' => ['options' => ['class' => 'form-group mb-3 mr-2 me-2']] // spacing form field groups
    ]); 
?>
    <?= $form->field(\$model, 'username') ?>
    <?= $form->field(\$model, 'password')->passwordInput() ?>
    <?= $form->field(\$model, 'rememberMe')->checkbox(['custom' => true]) ?>
    <div class="form-group mb-3">
    <?= Html::submitButton('Login', ['class' => 'btn btn-primary mr-1']) ?>
    <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
    </div>

<?php ActiveForm::end(); ?>

<?php 
    use kartik\form\ActiveForm; // or kartik\widgets\ActiveForm
    $form = ActiveForm::begin([
        'id' => 'login-form-inline', 
        'type' => ActiveForm::TYPE_INLINE,
        'tooltipStyleFeedback' => true, // shows tooltip styled validation error feedback
        'fieldConfig' => ['options' => ['class' => 'form-group mb-3 mr-2 me-2']], // spacing field groups
        'formConfig' => ['showErrors' => true],
        'options' => ['style' => 'align-items: flex-start'] // set style for proper tooltips error display
    ]); 
?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password')->passwordInput() ?>
    <?= $form->field($model, 'rememberMe', ['options' => ['class'=>'form-group mb-3 mt-2 mr-2 me-2']])->checkbox(['custom' => true]) ?>
    <?= Html::submitButton('Login', ['class' => 'btn btn-primary mr-1']) ?>
    <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
<?php ActiveForm::end(); ?>

Generates a Bootstrap 5.x floating labels form with vertical orientation. Note that this is supported only if your Bootstrap version is v5.x. For other Bootstrap versions setting this property has no impact and the form will be rendered with default vertical orientation. For Bootstrap 5.x environments, to activate this layout, you need to set the type parameter to ActiveForm::TYPE_FLOATING.

<?php 
    use kartik\form\ActiveForm; // or kartik\widgets\ActiveForm
    $form = ActiveForm::begin([
        'id' => 'login-form-vertical', 
        'type' => ActiveForm::TYPE_FLOATING
    ]); 
?>
    <?= $form->field($model, 'username') ?>
    <?= $form->field($model, 'password')->passwordInput() ?>
    <?= $form->field($model, 'rememberMe')->checkbox(['custom' => true]) ?>
    <div class="form-group mb-3">
        <?= Html::submitButton('Login', ['class' => 'btn btn-primary']) ?>
        <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
    </div>
<?php ActiveForm::end(); ?>