Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

zircuitz's avatar

Laravel X-Jet components renders HTML as <x-jet-component> directly when interpolating parameters on them parsed from PHP

I'm currently struggling getting my Laravel X-Jet components to behave.

Say I have a form with a component called <x-jet-input> in it.

Normally when I use this component like this:

<x-jet-input id="name" name="name" type="text" class="..." value="{{ old('name', $team->name) }}" autofocus/>

The HTML becomes this when I run it:

<input class="..." id="name" name="name" type="text" value="Output from PHP" autofocus="autofocus">
Now here is where the issue comes in:

If I add certain parameters that are interpolated from PHP; Like disabled:

<x-jet-input id="name" name="name" type="text" class="..." value="{{ old('name', $team->name) }}" {{ 'disabled' }} autofocus />

The rendered HTML output suddenly becomes this:

<x-jet-input id="name" name="name" type="text" class="..." value="Output from PHP" disabled="" autofocus=""></x-jet-input>

The whole element has turned into a <x-jet-input> on the raw HTML. I don't understand why, and the result is that the rendered output on the page is completely non-functional.

Here is what the component code looks like:

@props(['disabled' => false])

<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => '...']) !!}>

PS: Classes replaced with ... for readability.

I also ran into this same issue with x-jet-checkbox component. Trying to use the checked attribute.

What am I missing here?

I tried to manually add the component props value, and code the appropriate behavior directly into the component (Instead of relying on $attributes->merge()). This have the same result. It does not change the output.

If I put the disabled attribute in this case, directly in (without PHP interpolation):

<x-jet-input id="name" name="name" type="text" class="..." value="{{ old('name', $team->name) }}" disabled autofocus />

Everything works fine, and the HTML renders as normal:

<input disabled="" class="..." id="name" name="name" type="text" value="Output from PHP" autofocus="autofocus">

When I put PHP interpolation: I expect it to behave the same. But it doesn't. What am I missing here?

0 likes
2 replies
Sinnbeck's avatar
Sinnbeck
Best Answer
Level 102

Try

<x-jet-input id="name" name="name" type="text" class="..." value="{{ old('name', $team->name) }}" :disabled="$disabled" autofocus />
1 like

Please or to participate in this conversation.