Password strength

Feedback on password strength, with a segmented meter or a bar that updates as people type.

Bootstrap’s password strength docs describe the markup and CSS.

Segmented

Point a bsStrength meter at a password input with [input]. Its four segments fill as the password gets stronger. The meter has role="meter", with the level as its value text.

Password

HTML

<label bsFormLabel for="password1">Password</label>
<input
  #password1
  type="password"
  bsFormControl
  id="password1"
  placeholder="Enter password"
  autocomplete="new-password" />
<div bsStrength [input]="password1"></div>

With text feedback

Add a bsStrengthText element to show the level in its color. Changes are announced to screen readers.

Password

HTML

<label bsFormLabel for="password2">Password</label>
<input
  #password2
  type="password"
  bsFormControl
  id="password2"
  placeholder="Enter password"
  autocomplete="new-password" />
<div bsStrength #meter="bsStrength" [input]="password2"></div>
<span [bsStrengthText]="meter"></span>

Progress bar

Set variant="bar" for a single bar that grows with the strength.

Password

HTML

<label bsFormLabel for="password3">Password</label>
<input
  #password3
  type="password"
  bsFormControl
  id="password3"
  placeholder="Enter password"
  autocomplete="new-password" />
<div bsStrength variant="bar" [input]="password3"></div>

With forms

Pass the password with [password] instead, for example from a form control. Set messages, minLength, weights or thresholds to change the scoring, or a scorer function to replace it.

New password

Use at least 10 characters.

<div bsFormField>
  <label bsFormLabel>New password</label>
  <input type="password" bsFormControl autocomplete="new-password" [formControl]="password" />
  <div
    bsStrength
    #meter="bsStrength"
    minLength="10"
    [password]="password.value"
    [messages]="messages"></div>
  <span [bsStrengthText]="meter"></span>
  <small bsFormText>Use at least 10 characters.</small>
</div>

Static meters

Set the level on bsStrength for a static meter.

Weak

Fair

Good

Strong

HTML

<div class="vstack gap-3 fg-3">
  <div>
    <div>Weak</div>
    <div bsStrength="weak" aria-label="Weak password"></div>
  </div>
  <div>
    <div>Fair</div>
    <div bsStrength="fair" aria-label="Fair password"></div>
  </div>
  <div>
    <div>Good</div>
    <div bsStrength="good" variant="bar" aria-label="Good password"></div>
  </div>
  <div>
    <div>Strong</div>
    <div bsStrength="strong" variant="bar" aria-label="Strong password"></div>
  </div>
</div>

Strength criteria

By default a password earns a point for each of: the minimum length (8), 4 more characters, lowercase letters, uppercase letters, numbers, a special character, several special characters, and 16 or more characters. Scores up to 2 are weak, up to 4 fair, up to 6 good, and above that strong. passwordScore() is exported for your own checks.

abc scores 1

abcdefgh scores 2

Abcdefgh1 scores 4

Abcdefgh1! scores 5

Abcdefgh1!@#xyzw scores 8

<div class="vstack gap-3">
  @for (sample of samples; track sample.password) {
    <div>
      <code>{{ sample.password }}</code> scores {{ sample.score }}
      <div
        bsStrength
        [password]="sample.password"
        [aria-label]="`Strength of ${sample.password}`"></div>
    </div>
  }
</div>

API

BsStrength

Selector: div[bsStrength] · Exported as: bsStrength

Inputs

Name	Type	Default	Description
`bsStrength`	`'weak' \| 'fair' \| 'good' \| 'strong' \| ''`	`''`	A fixed level, for a static meter.
`variant`	`'segments' \| 'bar'`	`'segments'`	Four segments, or a single bar.
`input`	`HTMLInputElement \| null`	`null`	Password input to score as the user types.
`password`	`string \| null`	`null`	Password to score. Takes precedence over input.
`minLength`	`number`	`8`	Minimum length that earns the first point.
`weights`	`Partial<BsStrengthWeights>`	`{}`	Points per criterion. Set one to 0 to skip it.
`thresholds`	`[number, number, number]`	`[2, 4, 6]`	Highest scores for weak, fair and good.
`scorer`	`((password: string) => number) \| null`	`null`	Custom scoring that replaces the criteria.
`messages`	`Partial<Record<BsStrengthLevel, string>>`	`Weak, Fair, Good, Strong`	Text for each level.
`aria-label`	`string`	`'Password strength'`	Accessible name of the meter.

Methods

Name	Type	Description
`strength`	`Signal<BsStrengthLevel \| null>`	The level, or null for an empty password.
`score`	`Signal<number>`	The password’s score.
`message`	`Signal<string>`	The message for the level.

BsStrengthText

Selector: [bsStrengthText]

Inputs

Name	Type	Default	Description
`bsStrengthText`	`BsStrength`		The meter to describe. Required.