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 asterisk in the label to indicate that the field is required.

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

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 />
Previous
Form Input

Code highlighting provided by Torchlight