Custom validation on radio buttons if not selected | Tailwind - laravel

Question

How to validate by showing a red ring around the radio button and make text red. Currently I am just showing a validation popup message. See image for a better idea.
Radio component
<input type="radio" {!! $attributes->class(['border-gray-300 text-gray-600 shadow-sm focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-50', 'border-red-500 text-red-500' => $errors->has($attributes->get('name'))]) !!} />
Livewire view snippet
<div class="space-y-5">
#foreach ($ticket_types as $ticket_type)
<div>
<div class="relative flex items-start">
<div class="absolute flex items-center h-5">
<x-radio-button wire:model="ticket_type" #click="isQuestion = false" id="{{ $ticket_type->id }}" aria-describedby="{{ $ticket_type->id }}_description" value="{{ $ticket_type->id }}" class="h-4 w-4 transition duration-150 ease-in-out" />
</div>
<div class="pl-7 text-sm leading-5">
<x-jet-label for="{{ $ticket_type->id }}_title">
{{ $ticket_type->title }}
</x-jet-label>
<p id="{{ $ticket_type->id }}_description" class="text-gray-500">
{{ $ticket_type->description }}
</p>
</div>
</div>
</div>
#endforeach
</div>
<x-input-error for="ticket_type" />
Current look and feel
What I want to achieve (ignore the checkbox part)

Answer 1

You can conditionally include classes on components. So you could do something like:
<input type="radio"
{!! $attributes->class([
// these styles are applied by default
'border-gray-300 text-gray-600 shadow-sm focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-50',
// these are applied if the name of the component is found in the error bag
// meaning there was an error
'border-red-500 text-red-500' => $errors->has($attributes->get('name'))
])
!!} />