> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Toggle

> [!WARNING]
>
> You are currently viewing the documentation for Filament 3.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/forms).

## Overview

The toggle component, similar to a [checkbox](https://filament-34a8cf01.mintlify.site/3.x/forms/fields/checkbox.md), allows you to interact a boolean value.

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
```

Loading preview

![Toggle](https://filament-34a8cf01.mintlify.site/docs/images/3.x/light/forms/fields/toggle/simple.jpg)

If you're saving the boolean value using Eloquent, you should be sure to add a `boolean` [cast](https://laravel.com/docs/eloquent-mutators#attribute-casting) to the model property:

```php theme={"theme":"gruvbox-dark-hard"}
use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    protected $casts = [
        'is_admin' => 'boolean',
    ];

    // ...
}
```

## Adding icons to the toggle button

Toggles may also use an [icon](https://blade-ui-kit.com/blade-icons?set=1#search) to represent the "on" and "off" state of the button. To add an icon to the "on" state, use the `onIcon()` method. To add an icon to the "off" state, use the `offIcon()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
    ->onIcon('heroicon-m-bolt')
    ->offIcon('heroicon-m-user')
```

Loading preview

![Toggle icons](https://filament-34a8cf01.mintlify.site/docs/images/3.x/light/forms/fields/toggle/icons.jpg)

## Customizing the color of the toggle button

You may also customize the color representing the "on" or "off" state of the toggle. These may be either `danger`, `gray`, `info`, `primary`, `success` or `warning`. To add a color to the "on" state, use the `onColor()` method. To add a color to the "off" state, use the `offColor()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
    ->onColor('success')
    ->offColor('danger')
```

Loading preview

![Toggle off color](https://filament-34a8cf01.mintlify.site/docs/images/3.x/light/forms/fields/toggle/off-color.jpg)

Loading preview

![Toggle on color](https://filament-34a8cf01.mintlify.site/docs/images/3.x/light/forms/fields/toggle/on-color.jpg)

## Positioning the label above

Toggle fields have two layout modes, inline and stacked. By default, they are inline.

When the toggle is inline, its label is adjacent to it:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
    ->inline()
```

Loading preview

![Toggle with its label inline](https://filament-34a8cf01.mintlify.site/docs/images/3.x/light/forms/fields/toggle/inline.jpg)

When the toggle is stacked, its label is above it:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')
    ->inline(false)
```

Loading preview

![Toggle with its label above](https://filament-34a8cf01.mintlify.site/docs/images/3.x/light/forms/fields/toggle/not-inline.jpg)

## Toggle validation

As well as all rules listed on the [validation](https://filament-34a8cf01.mintlify.site/3.x/forms/validation.md) page, there are additional rules that are specific to toggles.

### Accepted validation

You may ensure that the toggle is "on" using the `accepted()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Toggle;

Toggle::make('terms_of_service')
    ->accepted()
```

### Declined validation

You may ensure that the toggle is "off" using the `declined()` method:

```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\Toggle;

Toggle::make('is_under_18')
    ->declined()
```

[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/3.x/packages/forms/docs/03-fields/05-toggle.md)

## Sponsored by

[Your logo here](https://github.com/sponsors/danharrin)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.