> ## 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 buttons
> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.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/toggle-buttons.md).
## Introduction
The toggle buttons input provides a group of buttons for selecting a single value, or multiple values, from a list of predefined options:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('status')
->options([
'draft' => 'Draft',
'scheduled' => 'Scheduled',
'published' => 'Published'
])
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
By default, the field stores one selected option. Selecting that option again clears the field to `null`.
`required()` prevents submitting an empty value, but does not prevent clearing the selection while editing. Use [`multiple()`](#selecting-multiple-buttons) to store more than one option.
## Changing the color of option buttons
You can change the [color](https://filament-34a8cf01.mintlify.site/4.x/styling/colors.md) of the option buttons using the `colors()` method. Each key in the array should correspond to an option value:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('status')
->options([
'draft' => 'Draft',
'scheduled' => 'Scheduled',
'published' => 'Published'
])
->colors([
'draft' => 'info',
'scheduled' => 'warning',
'published' => 'success',
])
```
If you are using an enum for the options, you can use the [`HasColor` interface](../advanced/enums#enum-colors) to define colors instead.
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
## Adding icons to option buttons
You can add [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md) to the option buttons using the `icons()` method. Each key in the array should correspond to an option value, and the value may be any valid [icon](https://filament-34a8cf01.mintlify.site/4.x/styling/icons.md):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
use Filament\Support\Icons\Heroicon;
ToggleButtons::make('status')
->options([
'draft' => 'Draft',
'scheduled' => 'Scheduled',
'published' => 'Published'
])
->icons([
'draft' => Heroicon::OutlinedPencil,
'scheduled' => Heroicon::OutlinedClock,
'published' => Heroicon::OutlinedCheckCircle,
])
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
If you are using an enum for the options, you can use the [`HasIcon` interface](../advanced/enums#enum-icons) to define icons instead.
Loading preview
If you want to display only icons, you can use `hiddenButtonLabels()` to hide the option labels.
Loading preview
## Adding tooltips to option buttons
You can add different tooltips to each option button using the `tooltips()` method.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('status')
->options([
'draft' => 'Draft',
'scheduled' => 'Scheduled',
'published' => 'Published',
])
->tooltips([
'draft' => 'Set as a draft before publishing.',
'scheduled' => 'Schedule publishing on a specific date.',
'published' => 'Publish now',
])
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
## Changing the button size
By default, toggle buttons use the medium size. You can change the size using the `size()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
use Filament\Support\Enums\Size;
ToggleButtons::make('status')
->options([
'draft' => 'Draft',
'scheduled' => 'Scheduled',
'published' => 'Published',
])
->size(Size::Small)
```
The available sizes are `Size::ExtraSmall`, `Size::Small`, `Size::Medium`, `Size::Large`, and `Size::ExtraLarge`. You can also pass their backed values (`'xs'`, `'sm'`, `'md'`, `'lg'`, and `'xl'`). Any other string is applied as a custom CSS class. Passing `null` restores the default medium size. The button size is also applied when using `grouped()`.
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
## Boolean options
If you want a simple boolean toggle button group, with "Yes" and "No" options, you can use the `boolean()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean()
```
The options will have [colors](#changing-the-color-of-option-buttons) and [icons](#adding-icons-to-option-buttons) set up automatically, but you can override these with `colors()` or `icons()`.
Loading preview
To customize the "Yes" label, you can use the `trueLabel` argument on the `boolean()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean(trueLabel: 'Absolutely!')
```
To customize the "No" label, you can use the `falseLabel` argument on the `boolean()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean(falseLabel: 'Not at all!')
```
## Positioning the options inline with each other
You may wish to display the buttons `inline()` with each other:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean()
->inline()
```
Loading preview
Optionally, you may pass a boolean value to control if the buttons should be inline or not:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean()
->inline(FeatureFlag::active())
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
## Grouping option buttons
You may wish to group option buttons together so they are more compact, using the `grouped()` method. This also makes them appear horizontally inline with each other:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean()
->grouped()
```
Loading preview
Optionally, you may pass a boolean value to control if the buttons should be grouped or not:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean()
->grouped(FeatureFlag::active())
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
## Filling the container's width
By default, the buttons only take up as much horizontal space as they need. You may use the `fullWidth()` method to allow buttons to stretch and fill the available width of their container. This can be used with the default (stacked) configuration, or alongside both `inline()` and `grouped()` methods:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean()
->inline()
->fullWidth()
```
Loading preview
Optionally, you may pass a boolean value to control if the buttons should fill the container width or not:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('feedback')
->label('Like this post?')
->boolean()
->inline()
->fullWidth(FeatureFlag::active())
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
## Selecting multiple buttons
The `multiple()` method on the `ToggleButtons` component allows you to select multiple values from the list of options:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('technologies')
->multiple()
->options([
'tailwind' => 'Tailwind CSS',
'alpine' => 'Alpine.js',
'laravel' => 'Laravel',
'livewire' => 'Laravel Livewire',
])
```
Loading preview
These options are returned in JSON format. If you're saving them using Eloquent, you should be sure to add an `array` [cast](https://laravel.com/docs/eloquent-mutators#array-and-json-casting) to the model property:
```php theme={"theme":"gruvbox-dark-hard"}
use Illuminate\Database\Eloquent\Model;
class App extends Model
{
/**
* @return array
*/
protected function casts(): array
{
return [
'technologies' => 'array',
];
}
// ...
}
```
Optionally, you may pass a boolean value to control if the buttons should allow multiple selections or not:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('technologies')
->multiple(FeatureFlag::active())
->options([
'tailwind' => 'Tailwind CSS',
'alpine' => 'Alpine.js',
'laravel' => 'Laravel',
'livewire' => 'Laravel Livewire',
])
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
## Splitting options into columns
You may split options into columns by using the `columns()` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('technologies')
->options([
// ...
])
->columns(2)
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
This method accepts the same options as the `columns()` method of the [grid](https://filament-34a8cf01.mintlify.site/4.x/schemas/layouts.md#grid-system). This allows you to responsively customize the number of columns at various breakpoints.
### Setting the grid direction
By default, when you arrange buttons into columns, they will be listed in order vertically. If you'd like to list them horizontally, you may use the `gridDirection(GridDirection::Row)` method:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
use Filament\Support\Enums\GridDirection;
ToggleButtons::make('technologies')
->options([
// ...
])
->columns(2)
->gridDirection(GridDirection::Row)
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
## Disabling specific options
You can disable specific options using the `disableOptionWhen()` method. It accepts a closure, in which you can check if the option with a specific `$value` should be disabled:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('status')
->options([
'draft' => 'Draft',
'scheduled' => 'Scheduled',
'published' => 'Published',
])
->disableOptionWhen(fn (string $value): bool => $value === 'published')
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
If you want to retrieve the options that have not been disabled, e.g. for validation purposes, you can do so using `getEnabledOptions()`:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\ToggleButtons;
ToggleButtons::make('status')
->options([
'draft' => 'Draft',
'scheduled' => 'Scheduled',
'published' => 'Published',
])
->disableOptionWhen(fn (string $value): bool => $value === 'published')
->in(fn (ToggleButtons $component): array => array_keys($component->getEnabledOptions()))
```
For more information about the `in()` function, please see the [Validation documentation](https://filament-34a8cf01.mintlify.site/4.x/forms/validation.md#in).
[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/packages/forms/docs/18-toggle-buttons.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.