View a complete demo.

The password input widget is a wrapper for the JQuery Strength meter plugin by Krajee. The plugin converts a password input into a widget with an advanced strength validation meter and toggle mask to show/hide the password. The widget displays a dynamic strength validation meter, which calculates the strength of the password as you type. You can configure the following options for the widget:
  • language string the two digit language code for displaying the widget in your language.

  • size string the size of the password input widget. Should be one of lg (for large size) and sm (for small size). md (medium/normal size)

  • togglePlacement string the positioning of the toggle mask class with respect to the input. Should be one of left or right. Defaults to right.

  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the plugin settings/options for the Strength Meter Plugin. There are a quite a few options you can set in this plugin. Refer the plugin documentation and demos for details.

  • pluginEvents: array the Strength Meter JQuery events. You must define events in event-name => event-function format. All events will be stacked in the sequence. Refer the plugin documentation and demos for details. For example:

    pluginEvents = [
        "strength.change" => "function() { log("strength.change"); }",
        "strength.toggle" => "function() { log("strength.toggle"); }",
        "strength.reset" => "function() { log("strength.reset"); }",
    ];
    
NOTE: This strength meter complements the StrengthValidator but has a separate validation routine. Hence, it and can be used individually or in conjunction with the StrengthValidator.

View a complete demo.

Usage with ActiveForm and model

With a model and without ActiveForm

Usage without a model

A readonly password input with an initial value

A disabled password input

use kartik\widgets\PasswordInput

// Usage with ActiveForm and model
echo $form->field($model, 'password')->widget(PasswordInput::classname(), []);

// With a model and without ActiveForm
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget(['model' => $model, 'attribute' => 'password_1']);

// Usage without a model
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget(['name' => 'password_2']);

// A readonly password input
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_3',
    'options' => [
        'readonly' => true
    ],
]);

// A disabled password input
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_4',
    'options' => [
        'disabled' => true
    ],
]);

View a complete demo.

Control size of the input and placement of the toggle mask

Show/Hide meter and toggle mask.

Alter strength verdict titles and CSS classes.

use kartik\widgets\PasswordInput

// Control size of the input and placement of the toggle mask
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_20',
    'size' => 'lg',
    'togglePlacement' => 'left'
]);

// Show/Hide meter and toggle mask.
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_21',
    'pluginOptions' => [
        'showMeter' => false,
        'toggleMask' => true
    ]
]);

// Alter strength verdict titles and CSS classes.
echo '<label class="control-label">Password</label>';
echo PasswordInput::widget([
    'name' => 'password_22',
    'pluginOptions' => [
        'verdictTitles' => [
            0 => 'Not Set',
            1 => 'Very Poor',
            2 => 'Poor',
            3 => 'Fair', 
            4 => 'Good',
            5 => 'Excellent'
        ],
        'verdictClasses' => [
            0 => 'text-muted',
            1 => 'text-danger',
            2 => 'text-warning',
            3 => 'text-info', 
            4 => 'text-primary',
            5 => 'text-success'
        ],
    ]
]);