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 button in table.
Source: https://larainfo.com/blogs/laravel-10-filament-v3-toggle-switch-example