@props([
    'name',
    'label',
    'value' => null,
    'type' => 'text',
    'required' => false,
    'readonly' => false,
])

<div {{ $attributes->only('class')->merge(['class' => 'space-y-1']) }}>
    <label for="{{ $name }}" class="font-data-label text-data-label text-on-surface-variant tracking-wide">
        {{ $label }}@if ($required) <span class="text-primary">*</span>@endif
    </label>
    <input id="{{ $name }}" name="{{ $name }}" type="{{ $type }}"
           value="{{ old($name, $value) }}"
           @required($required) @readonly($readonly)
           class="w-full bg-surface-container-low border border-outline-variant px-3 py-2 rounded focus:ring-1 focus:ring-primary focus:border-primary font-data-label text-on-surface transition-all
                  {{ $readonly ? 'opacity-70 cursor-not-allowed' : '' }}">
</div>