Toggle

Introducción

El componente toggle, similar a un checkbox, te permite interactuar con un valor booleano.

use Filament\Forms\Components\Toggle;

Toggle::make('is_admin')

Si estás guardando el valor booleano usando Eloquent, debes asegurarte de agregar un boolean cast a la propiedad del modelo:

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * @return array<string, string>
     */
    protected function casts(): array
    {
        return [
            'is_admin' => 'boolean',
        ];
    }

    // ...
}

Añadir iconos al botón toggle

Los toggles también pueden usar un icono para representar el estado "on" y "off" del botón. Para añadir un icono al estado "on", utiliza el método onIcon(). Para añadir un icono al estado "off", utiliza el método offIcon():

use Filament\Forms\Components\Toggle;
use Filament\Support\Icons\Heroicon;

Toggle::make('is_admin')
    ->onIcon(Heroicon::Bolt)
    ->offIcon(Heroicon::User)

Inyección de utilidades

Además de permitir valores estáticos, los métodos onIcon() y offIcon() también aceptan funciones para calcularlos dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Personalizar el color del botón toggle

También puedes personalizar el color que representa el estado "on" u "off" del toggle. Para añadir un color al estado "on", utiliza el método onColor(). Para añadir un color al estado "off", utiliza el método offColor():

use Filament\Forms\Components\Toggle;

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

Inyección de utilidades

Además de permitir valores estáticos, los métodos onColor() y offColor() también aceptan funciones para calcularlos dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Posicionar la etiqueta arriba

Los campos toggle tienen dos modos de diseño, en línea (inline) y apilado (stacked). Por defecto, son en línea.

Cuando el toggle está en línea, su etiqueta está adyacente a él:

use Filament\Forms\Components\Toggle;

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

Cuando el toggle está apilado, su etiqueta está arriba:

use Filament\Forms\Components\Toggle;

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

Inyección de utilidades

Además de permitir un valor estático, el método inline() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Validación del toggle

Además de todas las reglas listadas en la página de validación, existen reglas adicionales que son específicas para toggles.

Validación "accepted"

Puedes asegurarte de que el toggle esté en "on" usando el método accepted():

use Filament\Forms\Components\Toggle;

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

Opcionalmente, puedes pasar un valor booleano para controlar si la regla de validación debe aplicarse o no:

use Filament\Forms\Components\Toggle;

Toggle::make('terms_of_service')
    ->accepted(FeatureFlag::active())

Inyección de utilidades

Además de permitir un valor estático, el método accepted() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.

Validación "declined"

Puedes asegurarte de que el toggle esté en "off" usando el método declined():

use Filament\Forms\Components\Toggle;

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

Opcionalmente, puedes pasar un valor booleano para controlar si la regla de validación debe aplicarse o no:

use Filament\Forms\Components\Toggle;

Toggle::make('is_under_18')
    ->declined(FeatureFlag::active())

Inyección de utilidades

Además de permitir un valor estático, el método declined() también acepta una función para calcularlo dinámicamente. Puedes inyectar varias utilidades en la función como parámetros.