I went with the form field aproach, but instead of extracting the label and error into their own components I decided to wrap them into the field component, I also added an optional label parameter for when the label text is defferent than the name, like in category_id and Category.

@props(['name', 'label'])

<div class="mb-6">
    <label for="{{ $name }}" class="block mb-2 uppercase font-bol text-xs text-gray-700">
        {{ ucfirst($label ?: $name) }}
    </label>

    {{ $slot }}

    @error('{{ $name }}')
        <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
    @enderror
</div>

You can just use it like this for each type of field. As for the select component I did something similar leaving only a slot for the options.

@props(['name', 'label' => null])

<x-form.field name="{{ $name }}" label="{{ $label }}">
    <select class="border border-gray-400 p-2 w-full"
            name="{{ $name }}"
            value="{{ old($name) }}"
            id="{{ $name }}"
            required>

        {{ $slot }}

    </select>
</x-form.field>

And it looks a little bit cleaner on the view

<x-form.select name="category_id" label="Category">
    <option value="">Choose a category</option>
    @foreach ($categories as $category)
        <option value="{{ $category->id }}"
                {{ old('category_id') == $category->id ? 'selected' : '' }}>
            {{ ucwords($category->name) }}
        </option>
    @endforeach
</x-form.select>

Extract Form-Specific Blade Components

Updated Series Available