generated from boboko/starter
52 lines
1.5 KiB
PHP
52 lines
1.5 KiB
PHP
@props([
|
|
'label' => null,
|
|
'labelDescription' => null,
|
|
'labelClass' => null,
|
|
'hint' => null,
|
|
'for' => null,
|
|
'description' => null,
|
|
'error' => null,
|
|
'required' => false,
|
|
])
|
|
|
|
<div {{ $attributes->merge(['class' => 'flex flex-col gap-2']) }}>
|
|
|
|
@if ($label)
|
|
{{-- With a hint, label + hint are grouped so the hint sits tight
|
|
under the label, with the usual gap before the input. The input
|
|
should reference {for}-hint in its aria-describedby. --}}
|
|
@if ($hint) <div class="flex flex-col gap-1"> @endif
|
|
|
|
<label
|
|
@if ($for) for="{{ $for }}" @endif
|
|
@if ($labelClass) class="{{ $labelClass }}" @endif
|
|
>{{ $label }}@if ($required)<span class="ml-1" aria-hidden="true">*</span>@endif @if ($labelDescription) <span class="text-sm text-neutral-500">({{ $labelDescription }})</span> @endif</label>
|
|
|
|
@if ($hint)
|
|
<p
|
|
@if ($for) id="{{ $for }}-hint" @endif
|
|
class="text-sm text-neutral-500"
|
|
>{{ $hint }}</p>
|
|
</div>
|
|
@endif
|
|
@endif
|
|
|
|
{{ $slot }}
|
|
|
|
@if ($description && ! $error)
|
|
<p
|
|
@if ($for) id="{{ $for }}-description" @endif
|
|
class="text-sm text-neutral-500"
|
|
>{{ $description }}</p>
|
|
@endif
|
|
|
|
@if ($error)
|
|
<p
|
|
@if ($for) id="{{ $for }}-error" @endif
|
|
role="alert"
|
|
class="text-sm text-red-600"
|
|
>{{ $error }}</p>
|
|
@endif
|
|
|
|
</div>
|