Laravel Inertia Forms

Appearance

Fields

Toggle ​

Erag\InertiaForms\Fields\Toggle renders an on/off switch (a <button role="switch">), with optional text next to it that changes with the state.

When to use: settings that take effect as "on" or "off", like notifications or visibility flags.

php
use Erag\InertiaForms\Fields\Toggle;

Toggle::make('notifications')
    ->label('Email notifications')
    ->onLabel('On')
    ->offLabel('Off')
    ->default(true);

Examples ​

Each example is a live form built from the PHP below it. Fill it in and press submit to see the data your controller would receive.

Basic ​

A switch that starts on.

php
use Erag\InertiaForms\Fields\Toggle;

Toggle::make('notifications')->label('Email notifications')->default(true);

State labels ​

The text next to the switch changes with its state.

php
use Erag\InertiaForms\Fields\Toggle;

Toggle::make('public')
    ->label('Profile visibility')
    ->onLabel('Visible to everyone')
    ->offLabel('Only you can see this');

Advanced: privacy settings ​

The account switch stores active / paused instead of a boolean. The email switch only appears while the public profile is on, using visibleWhen().

php
use Erag\InertiaForms\Fields\Fieldset;
use Erag\InertiaForms\Fields\Toggle;

Fieldset::make('Privacy')
    ->fields([
        Toggle::make('status')
            ->label('Account')
            ->trueValue('active')
            ->falseValue('paused')
            ->onLabel('Active')
            ->offLabel('Paused')
            ->default('active'),
        Toggle::make('profile_public')
            ->label('Public profile')
            ->onLabel('Anyone can view your profile')
            ->offLabel('Only you can view your profile'),
        Toggle::make('show_email')
            ->label('Show my email on my profile')
            ->visibleWhen('profile_public', true),
    ]);

Methods ​

All common field methods are available, plus:

onLabel(?string $label) ​

Text shown next to the switch while it is on.

php
Toggle::make('public')->onLabel('Visible to everyone');

offLabel(?string $label) ​

Text shown next to the switch while it is off.

php
Toggle::make('public')->offLabel('Only you can see this');

trueValue(mixed $value) / falseValue(mixed $value) ​

The values stored for "on" and "off". Defaults are true and false.

php
Toggle::make('status')->trueValue('active')->falseValue('inactive');

Validation rules ​

ConfigurationRules
default (true/false)boolean
custom valuesRule::in([trueValue, falseValue]) (a null value is left out)
php
Toggle::make('status')->trueValue('active')->falseValue('inactive');
// ['nullable', Rule::in(['active', 'inactive'])]

As with Checkbox, required() means the switch must be on: it generates ['required', 'accepted'], or ['required', Rule::in([<trueValue>])] for custom values.

Value ​

  • The true value when on, the false value when off.
  • Empty value: the false value (false by default).
  • Bound values are converted: truthy becomes the true value, falsy the false value.

Standalone use ​

vue
<Toggle v-model="enabled" :field="enabledField" id="enabled" :disabled="false" />
tsx
<Toggle field={enabledField} id="enabled" value={enabled} disabled={false} onChange={setEnabled} />
svelte
<Toggle field={enabledField} id="enabled" bind:value={enabled} disabled={false} />

The switch compares its value with field.trueValue, so pass a serialized field. See Standalone Components.