All rules

Sheath rule

blade-no-unquoted-echo-attribute

Attribute values containing an echo must be quoted; unquoted values are cut at the first space in the echoed output.
Package
Core
Category
Blade
Default severity
warning by default
Auto-fix
Auto-fix available

safe. See Auto-fix.

#Why

In rendered HTML, an unquoted attribute value ends at the first whitespace:

$classes = 'btn btn-primary';
<div class={{ $classes }}> -> <div class="btn" btn-primary>

The browser reads btn as the class and invents a boolean btn-primary attribute. Whitespace in the data, such as a second class, a user name, or a title, silently truncates the value. A > or quote in the output can break the tag entirely.

On a component tag, an unquoted value is cut at the first space before the component renders. <x-alert class={{ $x }} /> therefore receives the literal string {{ as its class.

The rule reports any unquoted attribute value containing an echo, on elements and component tags alike. Escaped @{{ ... }} values and attribute-position constructs ({{ $attributes }}) are left alone.

#Examples

#Bad

<div class={{ $classes }}>Content</div>
<option value={{ $id }}>{{ $name }}</option>
<div class={{ $type }}-card>Content</div>
<x-alert class={{ $classes }} />

#Good

<div class="{{ $classes }}">Content</div>
<option value="{{ $id }}">{{ $name }}</option>
<div class="{{ $type }}-card">Content</div>
{{-- Static unquoted values have no echo to truncate --}}
<div class=card>Content</div>

#Auto-fix

The fix wraps the whole value in double quotes (single quotes when the value itself contains a double quote). Quoting an attribute value changes nothing about how a correct value renders and repairs the truncation.

{{-- before --}}
<div class={{ $classes }}>Content</div>
{{-- after --}}
<div class="{{ $classes }}">Content</div>

#Notes

  • Quoting cannot repair an echo inside a bound component attribute such as :value={{ $x }} because the bound value is already PHP. See blade-component-tag-integrity.

#Related Rules