Saltar al contenido principal

Toggle buttons

Introducción​

El input de toggle buttons proporciona un grupo de botones para seleccionar un único valor, o múltiples valores, de una lista de opciones predefinidas:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published'
    ])
Details

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

Cambiar el color de los botones de opción​

Puedes cambiar el color de los botones de opción usando el método colors(). Cada clave del array debe corresponder a un valor de opción:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published'
    ])
    ->colors([
        'draft' => 'info',
        'scheduled' => 'warning',
        'published' => 'success',
    ])

Si estás usando un enum para las opciones, puedes usar la interfaz HasColor para definir colores en su lugar.

Details

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

Añadir iconos a los botones de opción​

Puedes añadir icono a los botones de opción usando el método icons(). Cada clave del array debe corresponder a un valor de opción, y el valor puede ser cualquier icono válido:

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,
    ])
Details

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

Si estás usando un enum para las opciones, puedes usar la interfaz HasIcon para definir iconos en su lugar.

Si quieres mostrar solo iconos, puedes usar hiddenButtonLabels() para ocultar las etiquetas de las opciones.

Opciones booleanas​

Si quieres un grupo de botones booleano simple, con opciones "Yes" y "No", puedes usar el método boolean():

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()

Las opciones tendrán colores e iconos configurados automáticamente, pero puedes sobrescribirlos con colors() o icons().

Para personalizar la etiqueta de "Yes", puedes usar el argumento trueLabel en el método boolean():

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean(trueLabel: 'Absolutely!')

Para personalizar la etiqueta de "No", puedes usar el argumento falseLabel en el método boolean():

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean(falseLabel: 'Not at all!')

Posicionar las opciones en línea entre sí​

Puede que desees mostrar los botones inline() entre sí:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->inline()

Opcionalmente, puedes pasar un valor booleano para controlar si los botones deben estar en línea o no:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->inline(FeatureFlag::active())
Details

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.

Agrupar botones de opción​

Puede que desees agrupar botones de opción para que sean más compactos, usando el método grouped(). Esto también hace que aparezcan horizontalmente en línea entre sí:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->grouped()

Opcionalmente, puedes pasar un valor booleano para controlar si los botones deben agruparse o no:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('feedback')
    ->label('Like this post?')
    ->boolean()
    ->grouped(FeatureFlag::active())
Details

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

Seleccionar múltiples botones​

El método multiple() en el componente ToggleButtons te permite seleccionar múltiples valores de la lista de opciones:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('technologies')
    ->multiple()
    ->options([
        'tailwind' => 'Tailwind CSS',
        'alpine' => 'Alpine.js',
        'laravel' => 'Laravel',
        'livewire' => 'Laravel Livewire',
    ])

Estas opciones se devuelven en formato JSON. Si las estás guardando usando Eloquent, debes asegurarte de añadir un cast array a la propiedad del modelo:

use Illuminate\Database\Eloquent\Model;

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

    // ...
}

Opcionalmente, puedes pasar un valor booleano para controlar si los botones deben permitir selecciones múltiples o no:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('technologies')
    ->multiple(FeatureFlag::active())
    ->options([
        'tailwind' => 'Tailwind CSS',
        'alpine' => 'Alpine.js',
        'laravel' => 'Laravel',
        'livewire' => 'Laravel Livewire',
    ])
Details

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

Dividir opciones en columnas​

Puedes dividir opciones en columnas usando el método columns():

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('technologies')
    ->options([
        // ...
    ])
    ->columns(2)
Details

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

Este método acepta las mismas opciones que el método columns() del grid. Esto te permite personalizar responsivamente el número de columnas en varios breakpoints.

Establecer la dirección de la cuadrícula​

Por defecto, cuando organizas botones en columnas, se listarán en orden vertical. Si quieres listarlos horizontalmente, puedes usar el método gridDirection(GridDirection::Row):

use Filament\Forms\Components\ToggleButtons;
use Filament\Support\Enums\GridDirection;

ToggleButtons::make('technologies')
    ->options([
        // ...
    ])
    ->columns(2)
    ->gridDirection(GridDirection::Row)
Details

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

Deshabilitar opciones específicas​

Puedes deshabilitar opciones específicas usando el método disableOptionWhen(). Acepta un closure, en el que puedes comprobar si la opción con un $value específico debe estar deshabilitada:

use Filament\Forms\Components\ToggleButtons;

ToggleButtons::make('status')
    ->options([
        'draft' => 'Draft',
        'scheduled' => 'Scheduled',
        'published' => 'Published',
    ])
    ->disableOptionWhen(fn (string $value): bool => $value === 'published')
Details

Inyección de utilidades Puedes inyectar varias utilidades en la función como parámetros.

Si quieres recuperar las opciones que no han sido deshabilitadas, por ejemplo, para propósitos de validación, puedes hacerlo usando getEnabledOptions():

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()))

Para más información sobre la función in(), consulta la documentación de Validación.