@props([
    'label'             => null,
    'labelDescription'  => null,
    'for'               => null,
    'description'       => null,
    'error'             => null,
    'required'          => false,
])

<div {{ $attributes->merge(['class' => 'flex flex-col gap-2']) }}>

    @if ($label)
        <label
            @if ($for) for="{{ $for }}" @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>
    @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>