Add a Toggle Switch to Your Laravel 10 Filament v3 App with Ease

Learn how to easily add a toggle switch to your Laravel 10 Filament v3 app in this step-by-step tutorial. With Filament v3, you can quickly and easily add powerful features to your Laravel app without writing any code

You can use toggle switch via Toggle component.

use Filament\Forms\Components\Toggle;
 
Toggle::make('is_active')

 

If you're saving the boolean value using Eloquent, you should be sure to add a boolean cast to the model property:

use Illuminate\Database\Eloquent\Model;
 
class User extends Model
{
    protected $casts = [
        'is_active' => 'boolean',
    ];
 
    // ...
}

 

You can also use toggle column via ToggleColumn component.

use Filament\Tables\Columns\ToggleColumn;
 
ToggleColumn::make('is_active')

 

Also you can see we will add laravel 10 filament v3 crud app add toggle switch button.

Filament/Resources/BlogResource.php

<?php

namespace App\Filament\Resources;

use App\Filament\Resources\BlogResource\Pages;
use App\Filament\Resources\BlogResource\RelationManagers;
use App\Models\Blog;
use Filament\Forms;
use Filament\Forms\Form;
use Filament\Resources\Resource;
use Filament\Tables;
use Filament\Tables\Table;
use Filament\Forms\Components\TextInput;
use Filament\Forms\Components\Textarea;
use Filament\Tables\Columns\TextColumn;
use Filament\Forms\Components\Section;
use Filament\Forms\Components\RichEditor;
use Filament\Tables\Columns\ToggleColumn;
use Filament\Forms\Components\Toggle;
use Filament\Tables\Columns\ImageColumn;
use Illuminate\Database\Eloquent\Builder;
use Illuminate\Database\Eloquent\SoftDeletingScope;

class BlogResource extends Resource
{
    protected static ?string $model = Blog::class;

    protected static ?string $navigationIcon = 'heroicon-o-rectangle-stack';

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()
                    ->schema([
                        TextInput::make('title')->required(),
                        RichEditor::make('content')->required(),
                        Toggle::make('is_active')
                    ])
            ]);
    }

    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                TextColumn::make('id')->sortable(),
                TextColumn::make('title')->searchable()->sortable(),
                TextColumn::make('created_at')->searchable()->sortable(),
                ToggleColumn::make('is_active')->searchable(),
                TextColumn::make('content')->limit(20)->markdown()->sortable()->searchable(),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ])
            ->emptyStateActions([
                Tables\Actions\CreateAction::make(),
            ]);
    }

    public static function getRelations(): array
    {
        return [
            //
        ];
    }

    public static function getPages(): array
    {
        return [
            'index' => Pages\ListBlogs::route('/'),
            'create' => Pages\CreateBlog::route('/create'),
            'edit' => Pages\EditBlog::route('/{record}/edit'),
        ];
    }
}

toggle switch in Laravel 10 with filamentphp v3

 

Toggle switch button in table.

laravel 10 filament v3 activate and inactivate toggle

Source: https://larainfo.com/blogs/laravel-10-filament-v3-toggle-switch-example

#laravel 

Add a Toggle Switch to Your Laravel 10 Filament v3 App with Ease
1.80 GEEK