Passing Blade "Additional Attributes" Through Blade Components

[devajmeireles]

Laravel Version

11.9.2

PHP Version

8.2.19

Database Driver & Version

N/A

Description

As we know, Blade offers us convenient attributes as HTML-related directives:

• Readonly
• Disabled
• Checked
• Selected
• Required

The problem is that when we try to pass these attributes to a Blade component, the directive compiles successfully, but the component does not:

Considering the Laravel Breeze text-input component:

1. When we write this:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <x-text-input label="Name" @required(true) />

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900">
                    {{ __("You're logged in!") }}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Note: In the above example, we only wrote <x-text-input label="Name" @required(true) /> in the middle of the file.

2. The output is:

Steps To Reproduce

1. Prepare a fresh Laravel 11 application using Laravel Breeze (with Alpine)
2. Run the application
3. Open the dashboard.blade.php
4. Insert the following content in the middle of the file: <x-text-input label="Name" @required(true) />
5. Use the browser's dev tools to check the HTML rendered as demonstrated in the description of this ticket.

[driesvints]

This isn't supported unfortunately: https://laravel.com/docs/11.x/blade#component-attributes