antv
57 lines
1.8 KiB
PHP
57 lines
1.8 KiB
PHP
@props([
|
|
'type' => 'text',
|
|
'name',
|
|
'id' => null,
|
|
'label' => '',
|
|
'required' => false,
|
|
'value' => '',
|
|
'autocomplete' => null,
|
|
'icon' => null,
|
|
'hasError' => false,
|
|
])
|
|
|
|
@php
|
|
$id = $id ?? $name;
|
|
$isPassword = $type === 'password';
|
|
@endphp
|
|
|
|
<div class="floating-group">
|
|
<input
|
|
type="{{ $type }}"
|
|
name="{{ $name }}"
|
|
id="{{ $id }}"
|
|
placeholder=" "
|
|
@if($required) required @endif
|
|
value="{{ $value }}"
|
|
@if($autocomplete) autocomplete="{{ $autocomplete }}" @endif
|
|
{{ $attributes->merge(['class' => 'floating-input' . ($hasError ? ' border-red-500 focus:border-red-500 focus:ring-red-500/20' : '')]) }}
|
|
@if($hasError)
|
|
aria-invalid="true"
|
|
aria-describedby="login-errors"
|
|
@endif
|
|
/>
|
|
<label for="{{ $id }}" class="floating-label{{ $hasError ? ' text-red-500' : '' }}">
|
|
{{ $label }}
|
|
@if($required)
|
|
<span class="text-red-500" aria-hidden="true">*</span>
|
|
@endif
|
|
</label>
|
|
@if($icon)
|
|
<span class="floating-icon{{ $hasError ? ' text-red-500' : '' }}">
|
|
<x-icon :name="$icon" class="w-5 h-5" />
|
|
</span>
|
|
@endif
|
|
|
|
@if($isPassword)
|
|
<button
|
|
type="button"
|
|
class="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-medium focus:text-primary focus:outline-none focus:ring-2 focus:ring-primary/20 rounded p-1 transition-colors duration-200 cursor-pointer"
|
|
onclick="togglePasswordVisibility('{{ $id }}', this)"
|
|
aria-label="Show password"
|
|
>
|
|
<x-icon name="eye" class="w-5 h-5 eye-icon-open" />
|
|
<x-icon name="eye-slash" class="w-5 h-5 eye-icon-closed hidden" />
|
|
</button>
|
|
@endif
|
|
</div>
|