Usage:
@componenet('password', ['name' => 'Optional name/id. Defaults to "password".'])
Optional label text. Defaults to "Password".
@endcomponent
Usage:
@componenet('password', ['name' => 'Optional name/id. Defaults to "password".'])
Optional label text. Defaults to "Password".
@endcomponent
<label for="{{ $name ?? 'password' }}"> | |
{{ (string)$slot ?: 'Password' }}: | |
</label> | |
<div x-data="password()" class="form-input w-full pr-8 focus-within:shadow-outline relative"> | |
<input id="{{ $name ?? 'password' }}" :type="show ? 'text' : 'password'" class="w-full bg-gray-100 outline-none @error($name ?? 'password') border-red-500 @enderror" name="{{ $name ?? 'password' }}" required> | |
<button type="button" class="cursor-pointer z-100 absolute right-0 top-0 bottom-0 my-2 mr-2" @click="toggle()"> | |
<span x-show="!show" key="show-password"><i class="fas fa-fw fa-eye" title="Show password"></i></span> | |
<span x-show="show" key="hide-password"><i class="fas fa-fw fa-eye-slash" title="Hide password"></i></span> | |
</button> | |
</div> | |
@error($name ?? 'password') | |
<p class="text-red-500 text-xs italic mt-4"> | |
{{ $message }} | |
</p> | |
@enderror | |
<script> | |
function password() { | |
return { | |
show: false, | |
toggle() { | |
this.show = !this.show; | |
}, | |
}; | |
} | |
</script> |
Small bug: the
name
attribute was hardcoded topassword
. Should be:name="{{ $name ?? 'password' }}"