The password component offers an easy way to set up a password input field for your forms. By simply setting the name attribute it also automatically defines your id and the type attribute.

By default, the component shows a toggle icon, which allows the user to show and hide the password. The use of this feature requires:

  • AlpineJS
  • Blade Heroicons (different icons can be specified in the config file)
  • Proper tailwind configuration

As of version 1.4.10, you will need to specify a focus-within utility for the box-shadow styles so that focus can be properly shown on the password inputs that are toggleable. In your tailwind.config.js file, you should add the following variant to it:

module.exports = {
    // ...
    variants: {
        boxShadow: ['responsive', 'hover', 'focus', 'focus-within'],

{note} If you are using Tailwind's JIT, you shouldn't need to specify these variants anymore.

See the Tailwind documentation for more information.

The most basic usage of the component is as follows:

<x-password name="password" />

The show and hide icons can be configured via config:

'components' => [
    'password' => [
        'show_password_icon' => 'heroicon-s-eye',
        'hide_password_icon' => 'heroicon-o-eye-off',

If you do not want to show the toggle icon for the input, you can disable it by setting show-toggle to false. You should also disable it if you don't have alpine or blade heroicons installed.

<x-password name="password" :show-toggle="false" />

Unlike the other inputs, the password component will not set the value unless the password is flashed to the session by your backend.

Like the other inputs, the password input can also have leading addons, but since the package includes a password toggle as a trailing icon addon, you are not able to add a trailing addon to the password input. If you need a trailing addon, you should use the input component instead.

See the input documentation for more information.

Caught a mistake? Suggest an edit on GitHub