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

<div class="flex-1">

    <label
        for="{{ $name }}"
        class="text-xs font-medium text-gray-900"
    >
        {{ $label }}
    </label>

    <input
        id="{{ $name }}"
        name="{{ $name }}"
        type="{{ $type }}"
        value="{{ $value }}"
        @readonly($readonly)
        @required($required)

        {{
            $attributes->merge([
                'class' =>
                'mt-1 block w-full rounded-md border border-gray-300 p-1.5 shadow-sm focus:border-indigo-500 focus:ring-indigo-500'
            ])
        }}
    >

    <x-form.error
        :field="$name"
    />

</div>