WARNING! You are browsing the docs for an old version of TallStackUI!

Powerful suite of Blade components for TALL Stack apps.

Form Password

Form password component. Show or hide password value.

WARNING!

You are browsing the docs for an old version of TallStackUI. Consider upgrade your project to TallStackUI v3.

<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.

<!-- 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 !@#$%^&*()_+-=

<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.

<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