Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Locale The advice, in the user’s language.

Show Time

Show Feedback

Min Length

import { createStrengthMeter } from '@devix-labs/password-strength';
import '@devix-labs/password-strength/styles.css';

createStrengthMeter(document.querySelector('#target'), {
  locale: 'en',
  showTime: true,
  showFeedback: true,
  minLength: 8
});

import { StrengthMeter } from '@devix-labs/password-strength/react';
import '@devix-labs/password-strength/styles.css';

<StrengthMeter
  locale="en"
  showTime
  showFeedback
  minLength={8}
/>

<script setup>
import { StrengthMeter } from '@devix-labs/password-strength/vue';
import '@devix-labs/password-strength/styles.css';
</script>

<template>
  <StrengthMeter
  locale="en"
  show-time
  show-feedback
  :min-length="8"
/>
</template>

<script>
  import { strengthMeter } from '@devix-labs/password-strength/svelte';
  import '@devix-labs/password-strength/styles.css';
</script>

<div use:strengthMeter={{
  locale: 'en',
  showTime: true,
  showFeedback: true,
  minLength: 8
}} />

Every option here is in the documentation, along with the ones that are not worth a control.