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>

API Reference

Props, slots and exposed methods for <x-ui.password-strength>.

Props

Prop Type Default Description
name string 'password' The name attribute of the password input, so it submits with a form.
label string 'Password' Accessible label for the field, rendered visually hidden.
placeholder string '••••••••' Placeholder text for the empty field.
showChecklist bool true Show the live requirements checklist (length, mixed case, number, symbol) below the meter.
minLength int 8 Minimum character count for the length requirement and the strength score.
size string 'default' Field height and typography.
sm default lg
id string — Id for the input. Defaults to the name when omitted.