blatui

Components

Password Strength

A password field with a live strength meter and an optional requirements checklist.

php artisan blatui:add password-strength

  • Met: Not met: At least 8 characters
  • Met: Not met: Upper & lowercase letters
  • Met: Not met: A number
  • Met: Not met: A symbol 
<div class="w-full max-w-sm">
    <x-ui.password-strength name="password" label="Password" />
</div>

No Checklist

<div class="w-full max-w-sm">
    <x-ui.password-strength name="password" label="Password" :show-checklist="false" />
</div>

With Checklist

  • Met: Not met: At least 10 characters
  • Met: Not met: Upper & lowercase letters
  • Met: Not met: A number
  • Met: Not met: A symbol 
<div class="w-full max-w-sm">
    <x-ui.password-strength name="new_password" label="New password" :min-length="10" :show-checklist="true" />
</div>