@props([
    'name',
    'label',
    'type' => 'text',
    'required' => false,
    'hint' => null,
    'rows' => 5,
    'autocomplete' => null,
    'inputmode' => null,
    'maxlength' => null,
])
@php
    $id = 'f-'.str_replace(['[', ']', '.'], '-', $name);
    $err = $errors->first($name);
    $describe = trim(($hint ? $id.'-hint ' : '').($err ? $id.'-err' : ''));
@endphp
<div class="field @if($err) has-error @endif">
    <label class="field__label" for="{{ $id }}">{{ $label }}@if($required)<span class="req" aria-hidden="true"> *</span>@else <span class="opt">(optional)</span>@endif</label>
    @if ($type === 'textarea')
        <textarea class="input input--area" id="{{ $id }}" name="{{ $name }}" rows="{{ $rows }}" @if($required) required @endif
                  @if($maxlength) maxlength="{{ $maxlength }}" @endif
                  @if($err) aria-invalid="true" @endif @if($describe) aria-describedby="{{ $describe }}" @endif>{{ old($name) }}</textarea>
    @else
        <input class="input" id="{{ $id }}" type="{{ $type }}" name="{{ $name }}" value="{{ old($name) }}" @if($required) required @endif
               @if($autocomplete) autocomplete="{{ $autocomplete }}" @endif @if($inputmode) inputmode="{{ $inputmode }}" @endif
               @if($maxlength) maxlength="{{ $maxlength }}" @endif
               @if($err) aria-invalid="true" @endif @if($describe) aria-describedby="{{ $describe }}" @endif>
    @endif
    @if ($hint)<p class="field__hint" id="{{ $id }}-hint">{{ $hint }}</p>@endif
    @if ($err)<p class="field__err" id="{{ $id }}-err">{{ $err }}</p>@endif
</div>