Laravel — P67: HTML Attribute Directives in Blade

Embed logic directly into your HTML

In the last article we covered the @class and @style directives to implement conditional styling in Blade. But, there are other HTML attribute directives that are present in Blade that we can utilize:

  • @checked directive
  • @selected directive
  • @disabled directive
  • @readonly directive
  • @required directive

@checked directive

With the @checked directive, the radio button or checkbox will be checked if the condition is truthy.

Route::get('/directive-test', function () {
    return view('html-directives.index', ['isActiveVar' => true]);
});

The $isActiveVar variable is set to true and passed to the html-directives.index Blade file.

<label for="isActive">Is Active?</label>
<input type="checkbox"
       id="isActive"
       name="isActive"
       value="isActive"
       @checked( old('isActive', $isActiveVar) ) />
Inside the Blade file, the @checked directive accepts an argument that will be truthy. In this scenario, we pass the old() function that will preserve the state once the form is refreshed. The name of the checkbox is isActive, which is why we pass isActive into old(). If it’s a brand new connection to the form, we simply use the value of $isActiveVar. This is the code that it generates.
<label for="isActive">Is Active?</label>
<input type=”checkbox” id=”isActive” name=”isActive” value=”isActive” checked=””>

To see it without the old(), we simply pass the variable directly from the route.
<label for="isActiveTwo">Is Active Two?</label>
<input type="checkbox"
       id="isActiveTwo"
       name="isActiveTwo"
       value="isActiveTwo"
       @checked( $isActiveVar ) />

@selected directive

Now that we have the fundamental understanding of how the @checked directive functions, the other ones should be a piece of cake.

<label for="car">Car Select</label>

<select name="car" id="car">
    @foreach ($cars as $car)
        <option value="{{ $car->make }}" @selected(old('car') == $car->make)>
        {{ $car->make }}
        </option>
    @endforeach
</select>
Route::get('/directive-test', function () {
    return view('html-directives.index', [
        'isActiveVar' => true,
        'cars' => \App\Models\Car::all(),
    ]);
});

We loop through each of the $cars and extract the make property from it to populate our list. If the form is refreshed and the old('car') value matches our $car->make value, it will show as selected.

@disabled directive

I really like the example that the documentation gives for the @disabled directive. If there are errors, disable a particular field, like the Submit button.

<button type="submit" @disabled($errors->isNotEmpty())>Submit</button>
@readonly directive

@readonly directive

Sometimes the fields are readonly when being viewed by a non-admin. For example:

<label for="email">Email</label>
<input type="email"
       name="email"
       value="{{$user->email}}"
       @readonly($user->isNotAdmin()) />
<?php

namespace App\Models;

// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    // ...

    public function isNotAdmin(): bool
    {
        return true;
    }
}
Route::get('/directive-test', function () {
    return view('html-directives.index', [
        'isActiveVar' => true,
        'cars' => \App\Models\Car::all(),
        'user' => User::find(1),
    ]);
});

I’ve added the isNotAdmin method to our User class. Since it always returns true, the fields will will always be readonly.

@required directive

Setting a field as required can be done with the @required directive.

Route::get('/directive-test', function () {
    return view('html-directives.index', [
        'isActiveVar' => true,
        'cars' => \App\Models\Car::all(),
        'user' => User::find(1),
        'isRequired' => true,
    ]);
});
<label for="subject">Subject</label>
<input type="text"
       id="subject"
       name="subject"
       @required($isRequired) />
Stating that the field is required adds the required HTML attribute to our code.
<input type=”text” id=”subject” name=”subject” required=””>

Laravel Series

Continue your Laravel Learning.

Laravel — P66: Conditional Styling in Blade

Style smart, render dynamic

Laravel – P66: Conditional Styling In Blade

Part 66 of our Laravel fundamentals series explores dynamic class and style binding in Blade. Use ternaries, class directive, and attribute merging to toggle styles based on data, user roles, or environment, keeping components clean and responsive.

Laravel — P67: HTML Attribute Directives in Blade

Embed logic directly into your HTML

Laravel – P67: HTML Attribute Directives In Blade

Part 67 of our Laravel fundamentals series unpacks Blade’s HTML attribute directives. Learn to conditionally apply classes, data attributes, ARIA states, and booleans using @class, @style, @disabled, @checked, and custom attribute bags for cleaner, more expressive markup.

Laravel — P68: Defining Custom Directives in Blade

Extend Blade on your terms

Laravel – P68: Defining Custom Directives In Blade

Part 68 of our Laravel fundamentals series shows you how to define your own Blade directives. Encapsulate repetitive template logic, inject reusable HTML snippets, register provider macros, and keep your views DRY, readable, and expressive.

Leave a Reply