A Laravel package that provides Blade directives for conditionally rendering HTML attributes.
composer require nicksdot/blade-html-attributesThe package will auto-register the service provider.
Note: Rows in bold show special operator = & ! behaviour.
| Value | @attr | @data | @aria | @flag |
|---|---|---|---|---|
('foo', "bar") | foo="bar" | data-foo="bar" | aria-foo="bar" | foo |
('foo', "1") | foo="1" | data-foo="1" | aria-foo="1" | foo |
('foo', 1) | foo="1" | data-foo="1" | aria-foo="1" | foo |
('foo', true) | foo | data-foo | aria-foo="true" | foo |
('foo=', true) | foo="true" | data-foo="true" | aria-foo="true" | foo |
('foo', false) | (nothing) | (nothing) | aria-foo="false" | (nothing) |
('foo=', false) | foo="false" | data-foo="false" | aria-foo="false" | (nothing) |
('!foo', false) | (throws) | (throws) | (nothing) | (throws) |
('foo', "0") | foo="0" | data-foo="0" | aria-foo="0" | (nothing) |
('foo', 0) | foo="0" | data-foo="0" | aria-foo="0" | (nothing) |
('foo', '') | (nothing) | (nothing) | (nothing) | (nothing) |
('foo=', '') | foo="" | data-foo="" | (nothing) | (nothing) |
('foo', ' ') | (nothing) | (nothing) | (nothing) | (nothing) |
('foo=', ' ') | foo=" " | data-foo=" " | (nothing) | (nothing) |
('foo', null) | (nothing) | (nothing) | (nothing) | (nothing) |
Gotchas:
@attrand@dataallow the=suffix (e.g.,@attr('foo=', $value)) to force values (always render with="value", even for booleans and empty strings)@ariaallows the!prefix (e.g.,@aria('!foo', $value)) to negate false values for removing attribute entirely.
-
@attr: By default,truerenders as a boolean flag (attribute name only), andfalse/empty/whitespace-only/null render nothing. With the force-value operator (=suffix like'foo='), always renders with values including"true","false", and empty strings. -
@data: Same as@attrbut automatically prefixes attribute names withdata-. -
@aria: By default, renders all values including"true"and"false"(never as boolean flags). Never renders empty or whitespace-only strings. With the negation operator (!prefix like'! foo'),falsethe attribute is completely removed instead of rendering as"false". -
@flag: Outputs just the attribute name without a value (boolean flag), for truthy values only. Follows HTML spec for boolean attributes likedisabled,checked,requiredordata-foo.
{{-- Before / After --}} <a href="{{ $link->route }}" @if($link->title) title="{{ $link->title }} @endif" @if($link->rel) rel="{{ $link->rel }} @endif"></a> <a href="{{ $link->route }}" @attr('title', $link->title) @attr('rel', $link->rel)></a> {{-- Before / After --}} <input @if($value !== null) value="{{ $value }}" @endif /> <input @attr('value=', $value) /> {{-- Before / After --}} <select @if($size) size="{{ $size }}" @endif></select> <select @attr('size', $size)></select> {{-- Force rendering booleans as string value --}} <div @attr('contenteditable=', true)> Edit me (renders as `contenteditable="true"`) </div>{{-- Before / After --}} <div @if($id) data-id="{{ $id }}" @endif @if($value) data-value="{{ $value }}" @endif></div> <div @data('id', $id) @data('value', $value)></div> {{-- Before / After --}} <button @if($value) data-tracking-id="{{ $value }}" @endif></button> <button @data('tracking-id', $value)></button> {{-- Force rendering booleans as string value --}} <button @data('toggle=', $toggle)> Click (renders as `data-toggle="true"`) </button>{{-- Before / After --}} <button @if($label) aria-label="{{ $label }}" @endif @if($hidden) aria-hidden="{{ $hidden }}" @endif></button> <button @aria('label', $label) @aria('hidden', $hidden)></button> {{-- Before / After --}} <div @if($label && $label !== '') aria-label="{{ $label }}" @endif></div> <div @aria('label', $label)></div> {{-- Before / After --}} <div @if($hidden) aria-hidden="true" @endif></div> <div @aria('!hidden', $hidden)></div>{{-- Before --}} <button @if($isDisabled) disabled @endif>Submit</button> {{-- After --}} <button @flag('disabled', $isDisabled)>Submit</button> {{-- Multiple flag attributes --}} <input type="checkbox" @flag('checked', $isChecked) @flag('required', $isRequired) />- PHP 8.1+
- Laravel 10.0+
This package is open-sourced software licensed under the MIT licence.