Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add password-input

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::password-input> is a password field with a button to show what was typed — the single most requested affordance on any sign-in form, and the one most often built badly.

Basic Usage

<div class="max-w-sm">
    <x-aura::password-input name="password" label="Password" />
</div>
<x-aura::password-input name="password" label="Password" />

Props

Prop Type Default Description
label string|null null Field label.
revealable bool true Show the reveal toggle.
hint string|null null Help text below the field.
error string|null null Error message; also sets aria-invalid.
size string 'md' sm, md, lg.

With Livewire

<x-aura::password-input
    wire:model.blur="password"
    name="password"
    label="Password"
    :error="$errors->first('password')"
/>

How the reveal works

The type attribute flips between password and text.

That sounds obvious, but the common shortcut is to keep type="text" and fake the mask with a font or with CSS. Doing that loses everything the browser attaches to a real password field: the offer to save it, the warning when it is sent over plain HTTP, and the manager's autofill.

Accessibility

The toggle is a <button> carrying aria-pressed, not a checkbox and not an icon with a swapped title. aria-pressed is how a toggle button reports the state it is in — so it is announced correctly regardless of how it is styled — and the accessible name changes with it, from "Show password" to "Hide password".

Both strings are translatable.

A note on the pattern

Revealing a password is a deliberate act by the person who typed it, on their own screen. It is not a security weakness; forcing people to type a long password blind, with no way to check it, is what produces short ones.