https://github.com/almirhodzic/nova-toggle-5
Laravel Nova 5 Toggle Field
https://github.com/almirhodzic/nova-toggle-5
laravel laravel-package nova-extension nova-tool nova5 tailwindcss-v4 toggle typescript vue3
Last synced: 6 months ago
JSON representation
Laravel Nova 5 Toggle Field
- Host: GitHub
- URL: https://github.com/almirhodzic/nova-toggle-5
- Owner: almirhodzic
- License: mit
- Created: 2025-10-31T12:39:02.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-11-23T11:31:02.000Z (7 months ago)
- Last Synced: 2025-11-23T13:12:11.583Z (7 months ago)
- Topics: laravel, laravel-package, nova-extension, nova-tool, nova5, tailwindcss-v4, toggle, typescript, vue3
- Language: Vue
- Homepage: https://novafront.dev
- Size: 89.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Laravel Nova 5 Toggle Field
This Laravel Nova 5 Toggle Field removes the detour into the edit page and lets you flip booleans directly in the index. Fewer clicks, less context switching, smoother workflow.
## Features
- Quick toggle directly from index view
- Customizable colors for light and dark mode
- Built-in readonly and visibility controls
- Optional help text for different views
- Custom ON/OFF labels with color customization
- Optional toast notification control
- Customizable toast message labels
- Filter support for index views
- Logs the update action in Nova's action events
- Vue 3 Composition API
- Full dark mode support
## Requirements
- PHP 8.2+
- Laravel Nova 5.x
## Installation
```bash
composer require almirhodzic/nova-toggle-5
```
The service provider will be automatically registered.
## Basic Usage
```php
use AlmirHodzic\NovaToggle5\Toggle;
public function fields(NovaRequest $request)
{
return [
Toggle::make('Active', 'is_active'),
];
}
```
## Configuration
### Colors
#### Toggle Background Colors
```php
Toggle::make('Active', 'is_active')
->onColor('#00d5be', '#009689') // Light mode, Dark mode
->offColor('#e5e5e5', '#323f57');
```
#### Bullet Colors
```php
Toggle::make('Active', 'is_active')
->onBullet('white') // Same for both modes
->offBullet('white', 'grey'); // Light mode, Dark mode
```
### Labels
#### Custom ON/OFF Text
```php
Toggle::make('Active', 'is_active')
->valueLabelText('ON', 'OFF'); // ON label, OFF label
```
#### Label Colors
```php
Toggle::make('Active', 'is_active')
->valueLabelText('ON', 'OFF')
->valueLabelOnColors('#ffffff') // ON label color
->valueLabelOffColors('#a1a1a1', '#737373'); // OFF label colors (light, dark)
```
### Toast Notifications
#### Custom Toast Label
By default, the toast message uses the resource's `name`, `label`, `title`, or the resource's singular label. You can customize which model attribute to use:
```php
Toggle::make('Show', 'show')
->toastLabelKey('question'); // Uses $model->question instead of default
```
**Default fallback order:** `name` → `label` → `title` → resource singular label
#### Disable Toast Notifications
```php
Toggle::make('Active', 'is_active')
->toastShow(false); // No toast notification on toggle
```
### Filtering
To make your toggle field filterable in the index view, you need to create a custom filter.
#### Step 1: Create a Filter
```bash
php artisan nova:filter IsActiveFilter
```
#### Step 2: Implement the Filter
```php
where('is_active', true);
}
if ($value === 'inactive') {
return $query->where('is_active', false);
}
return $query;
}
public function options(NovaRequest $request): array
{
return [
'Active' => 'active',
'Inactive' => 'inactive',
];
}
}
```
#### Step 3: Register the Filter in Your Resource
```php
use App\Nova\Filters\IsActiveFilter;
public function filters(NovaRequest $request): array
{
return [
new IsActiveFilter,
];
}
```
#### Alternative: Boolean Filter (Checkboxes)
If you prefer checkboxes instead of a dropdown:
```php
where('is_active', $value['active']);
}
if (isset($value['inactive'])) {
return $query->where('is_active', !$value['inactive']);
}
return $query;
}
public function options(NovaRequest $request): array
{
return [
'Active' => 'active',
'Inactive' => 'inactive',
];
}
}
```
Now use
```php
Toggle::make('Active', 'is_active')
->filterable()
...
```
### Help Text
Add contextual help text for different views:
```php
Toggle::make('Active', 'is_active')
->helpOnIndex('Toggle to activate/deactivate')
->helpOnForm('Enable this option to activate the feature')
->helpOnDetail('Current activation status');
```
### Visibility & Access Control
#### Hide Based on Condition
```php
Toggle::make('Active', 'is_active')
->hideWhen(function ($request, $resource) {
return $resource->status === 'archived';
});
```
#### Readonly Based on Condition
```php
Toggle::make('Active', 'is_active')
->readonlyWhen(function ($request, $resource) {
return !$request->user()->isAdmin();
});
```
#### Guard-Based Access Control
By default, the toggle checks authentication guards defined in your config. Create a config file:
```php
// config/nova-toggle-5.php
return [
'guards' => ['web', 'admin'],
];
```
## Complete Example
```php
use AlmirHodzic\NovaToggle5\Toggle;
use App\Nova\Filters\IsActiveFilter;
public function fields(NovaRequest $request)
{
return [
ID::make()->sortable(),
Text::make('Name'),
Toggle::make('Active', 'is_active')
->filterable()
->onColor('#10b981', '#059669')
->offColor('#ef4444', '#dc2626')
->onBullet('#ffffff')
->offBullet('#ffffff')
->valueLabelText('ON', 'OFF')
->valueLabelOnColors('#ffffff')
->valueLabelOffColors('#fecaca', '#fca5a5')
->helpOnIndex('Click to toggle status')
->helpOnForm('Enable to make this item visible')
->toastShow(true)
->readonlyWhen(function ($request, $resource) {
return !$request->user()->can('edit', $resource);
}),
Toggle::make('Featured', 'is_featured')
->onColor('#f59e0b')
->offColor('#6b7280')
->valueLabelText('★', '☆')
->toastShow(false)
->hideWhen(function ($request, $resource) {
return !$resource->is_active;
}),
Toggle::make('Show FAQ', 'show')
->toastLabelKey('question') // Uses $faq->question for toast message
->helpOnIndex('Toggle visibility'),
];
}
public function filters(NovaRequest $request): array
{
return [
new IsActiveFilter,
];
}
```
## API Reference
### Methods
| Method | Parameters | Description |
| ----------------------- | ---------------------------------------------------- | -------------------------------------- |
| `onColor()` | `string $light, ?string $dark = null` | Background color when ON |
| `offColor()` | `string $light, ?string $dark = null` | Background color when OFF |
| `onBullet()` | `string $light, ?string $dark = null` | Bullet color when ON |
| `offBullet()` | `string $light, ?string $dark = null` | Bullet color when OFF |
| `valueLabelText()` | `?string $onLabel = 'ON', ?string $offLabel = 'OFF'` | Custom label text |
| `valueLabelOnColors()` | `string $light, ?string $dark = null` | ON label color |
| `valueLabelOffColors()` | `string $light, ?string $dark = null` | OFF label color |
| `toastShow()` | `bool $show = true` | Show/hide toast notification on toggle |
| `toastLabelKey()` | `string $key` | Model attribute to use for toast label |
| `hideWhen()` | `callable $callback` | Hide field based on condition |
| `readonlyWhen()` | `callable $callback` | Make readonly based on condition |
| `helpOnIndex()` | `string $text` | Help text on index view |
| `helpOnForm()` | `string $text` | Help text on form view |
| `helpOnDetail()` | `string $text` | Help text on detail view |
### Default Colors
| State | Light Mode | Dark Mode |
| -------------- | ---------- | --------- |
| ON Background | `#00d5be` | `#009689` |
| OFF Background | `#e5e5e5` | `#323f57` |
| ON Bullet | `#ffffff` | `#ffffff` |
| OFF Bullet | `#ffffff` | `#ffffff` |
| ON Label | `#ffffff` | `#ffffff` |
| OFF Label | `#a1a1a1` | `#737373` |
### Default Behavior
| Option | Default Value |
| --------------- | ---------------------------------------------------------------------- |
| `toastShow` | `true` |
| `toastLabelKey` | `null` (uses fallback: name → label → title → resource singular label) |
## Bug or Issues
Found a Bug or Issue? Please report here: [GitHub Issues](https://github.com/almirhodzic/nova-toggle-5/issues)
We appreciate your feedback to help improve this package.
## Support
- [Issues](https://github.com/almirhodzic/nova-toggle-5/issues)
- [Source Code](https://github.com/almirhodzic/nova-toggle-5)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
## Credits
- [Almir Hodzic](https://frontbyte.ch)
- [All Contributors](../../contributors)
---
By [Frontbyte](https://frontbyte.ch)