New version 1.30.0 is now available 🎉 Introducing a useful command to search for component usage.

Powerful suite of Blade components for TALL Stack apps.

Form Password

Form password component. Show or hide password value.

<x-password value="TallStackUi" />
Insert your best password
<x-password label="Password"
hint="Insert your best password"
value="TallStackUi" />

An option to display an asterisk indicating that the field is required.

Insert your password
<x-password label="Password *"
hint="Insert your password"
value="TallStackUi" />

An option to control the caps lock indicator.

Activate caps lock to see the indicator.
<x-password hint="Activate caps lock to see the indicator." />
 
<!-- To disable and do not show the indicator use `mixed-case` -->
<x-password hint="Activate caps lock to see the indicator." mixed-case />

The caps lock indicator does not work on mobile devices.

An option to visually validate the format of the entered password.

Expected Password Format:

At least 8 characters

At least one symbol (!@#)

At least one number

At least one uppercase character

<!-- Allowed: min, symbols, numbers, mixed -->
 
<!-- You can set min to `min:8` or
omit the number to use the default -->
 
<!-- You can define symbols like `symbols:!@#`
or omit symbols to use the defaults -->
 
<x-password :rules="['min:8', 'symbols:!@#', 'numbers', 'mixed']" />

  • If you do not specify the min size then the default size will be 8
  • If you do not specify the symbols then the default symbols will be !@#$%^&*()_+-=

Expected Password Format:

At least 8 characters

At least one symbol (!@#$%^&*()_+-=)

At least one number

At least one uppercase character

<x-password generator :rules="['min:8', 'symbols', 'numbers', 'mixed']" />

  • The generator requires the rules attributes.
  • The generated password will match the rules passed to the component.

Expected Password Format:

At least 8 characters

At least one symbol (!@#$%^&*()_+-=)

At least one number

At least one uppercase character

<x-password value="TallStackUI"
generator
:rules="['min:8', 'symbols', 'numbers', 'mixed']"
x-on:reveal="alert(`Password Revealed: ${$event.detail.status}`)"
x-on:generate="alert(`Password Generated: ${$event.detail.password}`)" />

An option to not show validation error message

Insert your best password
<x-password label="Password"
hint="Insert your best password"
value="TallStackUi"
invalidate />

Code highlighting provided by Torchlight