Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
What might be the best way for determining the first invalid input field in a flash error list in order to set the autofocus on that input field. By default, Laravel Breeze places the autofocus on the first field of the registration form, but I would like to have it so that autofocus is placed on the first invalid field in the form. To do this, I modified the existing input field component (x-input) to accept an autofocus property.
@props(['disabled' => false, 'autofocus' => false])
<input {{ $disabled ? 'disabled' : '' }} {{ $autofocus ? 'autofocus' : '' }} {!! $attributes->merge(['class' => 'rounded-md shadow-sm border-gray-300 focus:border-tlabTertiary focus:ring focus:ring-tlabTertiary']) !!}>
I then use raw php directives to determine whether the field’s input is invalid, set a flag variable to true/false accordingly, and then send this variable to the input component.
<form method="POST" action="{{ route('register') }}">
@csrf
<!-- Name -->
<div>
@php
$autofocus = false;
if ($errors->has('name') || !$errors->any()) {
$autofocus = true;
}
@endphp
<x-label for="name" :value="__('Name')" />
<x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" :autofocus='$autofocus' />
<x-input-error field="name" />
</div>
<!-- Email Address -->
<div class="mt-4">
@php
$autofocus = false;
if ($errors->has('email')) {
$autofocus = true;
}
@endphp
<x-label for="email" :value="__('Email')" />
<x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required :autofocus='$autofocus' />
<x-input-error field="email" />
</div>
// ...
</form>
The $errors variable will tell you what the first error message is, but I'm not sure if it can tell you which input field it pertains to.
$errors->first('email')
There is surely a more elegant solution than the one I've come up with, perhaps using Livewire or Alpine? Or does Blade have an autofocus feature that I'm unaware of?
the error bag is just a collection, you should be able to get the first() entry, but this will might give you the 1st in your validation rules not the first on the page?
But what I would investigate is setting an extra property in the error bag once you have autofocus your first error so that subsequent instances of your component on the page know not to autofocus
Thanks @snapey and @michaelvanes for this, I'm reviving the discussion because I can't find much else on the topic. I modified the code to stop checking for errors and autofocus the first found error:
<div class="col-span-2">
@php
$autofocus = false;
if ($errors->has('name') || !$errors->any()) {
$autofocus = true;
}
@endphp
<x-input-label for="name" ... />
<x-text-input id="name" name="name"... :autofocus='$autofocus' />
<x-input-error ... :messages="$errors->get('name')" />
</div>
<div>
@php
if ($errors->has('code') && !$autofocus) {
$autofocus = true;
} else {
$autofocus = false;
}
@endphp
<x-input-label for="code" ... />
<x-text-input id="code" name="code" ... :autofocus='$autofocus' />
<x-input-error ... :messages="$errors->get('code')" />
</div>
...
Original question was how to make it more elegant and I agree it's not very Laravel but the best non-JS solution I can find. So if anyone has a better way to do this I'd love to hear about it.
@irclever from MDN
No more than one element in the document or dialog may have the autofocus attribute. If applied to multiple elements the first one will receive focus.
You should be able to apply autofocus to any element with an error
Please or to participate in this conversation.