Zeig deinen Nutzern schon beim Tippen, wie sicher ihr Passwort ist – mit segmentierter Anzeige oder Fortschrittsbalken.

Stärkeanzeigen helfen dabei, sichere Passwörter zu wählen, weil sie die Komplexität sofort sichtbar machen. Die Komponente bewertet das Passwort per JavaScript und färbt die Anzeige je nach Stufe ein. Ohne JavaScript lässt sie sich auch als statische Anzeige nutzen.

• Segmentiert: vier Segmente, die sich mit steigender Stärke füllen.
• Fortschrittsbalken: ein einzelner Balken, der mitwächst.
• Textrückmeldung: optionale Meldung pro Stärkestufe.
• Anpassbare Bewertung: Mindestlänge, Gewichtung und Schwellen konfigurierbar.
• Schlank: wenig JavaScript, typisches Bootstrap-Muster.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Beispiele

Segmentiert

Standardmäßig besteht die Anzeige aus vier Segmenten, die sich mit zunehmender Stärke füllen. data-bs-strength aktiviert das JavaScript.

<div>
  <label for="password1" class="form-label">Passwort</label>
  <input type="password" class="form-control" id="password1" placeholder="Passwort eingeben">
  <div class="strength" data-bs-strength>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>

Mit Textrückmeldung

Ein zusätzliches .strength-text-Element zeigt die Stärke als Text an.

<div>
  <label for="password2" class="form-label">Passwort</label>
  <input type="password" class="form-control" id="password2" placeholder="Passwort eingeben">
  <div class="strength" data-bs-strength>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
  <span class="strength-text"></span>
</div>

Fortschrittsbalken

Mit .strength-bar erhältst du einen einzelnen Balken, der mit der Passwortstärke wächst.

<div>
  <label for="password3" class="form-label">Passwort</label>
  <input type="password" class="form-control" id="password3" placeholder="Passwort eingeben">
  <div class="strength-bar" data-bs-strength></div>
</div>

Statische Anzeige

Statisch segmentiert

Ohne JavaScript nutzt du die Komponente als reine Anzeige: Setze den Wert von data-bs-strength selbst und markiere die gefüllten Segmente mit .active.

<div>
  <div>Schwach</div>
  <div class="strength" data-bs-strength="weak">
    <div class="strength-segment active"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>
<div>
  <div>Mittel</div>
  <div class="strength" data-bs-strength="fair">
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>
<div>
  <div>Gut</div>
  <div class="strength" data-bs-strength="good">
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment"></div>
  </div>
</div>
<div>
  <div>Stark</div>
  <div class="strength" data-bs-strength="strong">
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
    <div class="strength-segment active"></div>
  </div>
</div>

Statischer Fortschrittsbalken

Beim Balken genügt der Wert von data-bs-strength.

<div>
  <div>Schwach</div>
  <div class="strength-bar" data-bs-strength="weak"></div>
</div>
<div>
  <div>Mittel</div>
  <div class="strength-bar" data-bs-strength="fair"></div>
</div>
<div>
  <div>Gut</div>
  <div class="strength-bar" data-bs-strength="good"></div>
</div>
<div>
  <div>Stark</div>
  <div class="strength-bar" data-bs-strength="strong"></div>
</div>

Typischer Einsatz ist serverseitig gerendertes HTML, bei dem die Stärke bereits feststeht:

<!-- Set via server-side logic -->
<div class="strength" data-bs-strength="good">
  <div class="strength-segment active"></div>
  <div class="strength-segment active"></div>
  <div class="strength-segment active"></div>
  <div class="strength-segment"></div>
</div>

Bewertungskriterien

Der eingebaute Algorithmus vergibt für jedes erfüllte Kriterium Punkte:

Aus der Summe ergibt sich die Stärkestufe:

Verwendung

Per Data-Attribute

data-bs-strength initialisiert die Komponente automatisch. Sie sucht das Passwortfeld im selben Elterncontainer.

<div>
  <input type="password" class="form-control">
  <div class="strength" data-bs-strength>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
    <div class="strength-segment"></div>
  </div>
</div>

Per JavaScript

const element = document.querySelector('.strength')
const strength = new bootstrap.Strength(element, {
  input: '#my-password-input',
  minLength: 10,
  messages: {
    weak: 'Zu schwach',
    fair: 'Geht besser',
    good: 'Gutes Passwort',
    strong: 'Ausgezeichnet!'
  }
})

Optionen

Standard-Gewichtung

{
  minLength: 1,        // Meets minimum length
  extraLength: 1,      // 4+ characters over minimum
  lowercase: 1,        // Contains lowercase letters
  uppercase: 1,        // Contains uppercase letters
  numbers: 1,          // Contains numbers
  special: 1,          // Contains special characters
  multipleSpecial: 1,  // Multiple special characters
  longPassword: 1      // 16+ characters
}

Eigene Gewichtung

// Disable uppercase requirement, make special chars worth more
new bootstrap.Strength(element, {
  weights: {
    uppercase: 0,   // Don't require uppercase
    special: 2      // Special chars worth 2 points
  },
  thresholds: [3, 5, 7]  // Adjust thresholds for new max score
})

Eigene Bewertungsfunktion

// Fully custom scoring logic
new bootstrap.Strength(element, {
  scorer: (password) => {
    let score = 0
    if (password.length >= 12) score += 4
    if (/[!@#$%]/.test(password)) score += 4
    return score
  },
  thresholds: [2, 4, 6]
})

Methoden

const element = document.querySelector('.strength')
const strength = bootstrap.Strength.getOrCreateInstance(element)

// Get current strength
console.log(strength.getStrength()) // 'fair'

Events

const element = document.querySelector('.strength')

element.addEventListener('strengthChange.bs.strength', event => {
  console.log('Strength:', event.strength) // 'weak', 'fair', 'good', 'strong'
  console.log('Score:', event.score) // 0-8
})

CSS-Variablen und die Sass-Liste der Stärkestufen findest du in der Originaldoku.

Die Stärkeanzeige ist eine visuelle Zusatzinformation und ersetzt keine klar formulierten Passwortanforderungen.

• Nenne die Anforderungen an das Passwort immer zusätzlich als Text.
• Verknüpfe das Passwortfeld per aria-describedby mit diesem Anforderungstext.
• Nutze die Textrückmeldung (.strength-text) – Screenreader-Nutzer profitieren davon, dass Änderungen der Stärke angesagt werden.