Laravel Inertia Forms

Appearance

Fields

Checkbox ​

Erag\InertiaForms\Fields\Checkbox renders a single checkbox with its label next to it.

When to use: a single yes/no choice, like "I agree to the terms" or "Remember me".

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 required checkbox must be ticked before the form can be sent.

php
use Erag\InertiaForms\Fields\Checkbox;

Checkbox::make('terms')->label('I agree to the terms')->required();

Custom values ​

Store yes / no or 1 / 0 instead of true / false. Toggle them and submit to see the values.

php
use Erag\InertiaForms\Fields\Checkbox;

[
    Checkbox::make('newsletter')
        ->label('Send me the monthly newsletter')
        ->trueValue('yes')
        ->falseValue('no'),
    Checkbox::make('marketing_opt_in')
        ->label('I’m happy to hear about offers')
        ->trueValue(1)
        ->falseValue(0),
];

Advanced: sign-up form ​

An optional newsletter box that starts ticked, next to the required terms box.

php
use Erag\InertiaForms\Fields\Checkbox;
use Erag\InertiaForms\Fields\TextInput;
use Erag\InertiaForms\Form;

class SignupForm extends Form
{
    public function fields(): array
    {
        return [
            TextInput::make('email')->email()->required(),
            TextInput::make('password')->password()->autocomplete('new-password')->required(),
            Checkbox::make('newsletter')
                ->label('Email me product updates')
                ->help('At most twice a month. Unsubscribe any time.')
                ->default(true),
            Checkbox::make('terms')
                ->label('I agree to the terms of service and privacy policy')
                ->required(),
        ];
    }
}

Methods ​

All common field methods are available, plus:

trueValue(mixed $value) ​

The value stored when the box is checked. Default true.

php
Checkbox::make('newsletter')->trueValue('yes')->falseValue('no');

falseValue(mixed $value) ​

The value stored when the box is unchecked. Default false.

php
Checkbox::make('opt_in')->trueValue(1)->falseValue(0);

Validation rules ​

ConfigurationRules
default (true/false)boolean
custom true/false valuesRule::in([trueValue, falseValue]) (a null value is left out)
php
Checkbox::make('remember');
// ['nullable', 'boolean']

Checkbox::make('newsletter')->trueValue('yes')->falseValue('no');
// ['nullable', Rule::in(['yes', 'no'])]

Required means "must be checked" ​

php
Checkbox::make('terms')->label('I agree to the terms')->required();
// ['required', 'accepted']

Checkbox::make('newsletter')->trueValue('yes')->falseValue('no')->required();
// ['required', Rule::in(['yes'])]

On failure the message reads "The I agree to the terms field must be accepted."

Value ​

  • The true value when checked, the false value when unchecked.
  • Empty value: the false value (false by default).
  • Bound values are converted: a value equal to the true or false value is kept, otherwise truthy becomes the true value and falsy the false value.

Standalone use ​

vue
<Checkbox v-model="remember" :field="rememberField" id="remember" :disabled="false" />
tsx
<Checkbox field={rememberField} id="remember" value={remember} disabled={false} onChange={setRemember} />
svelte
<Checkbox field={rememberField} id="remember" bind:value={remember} disabled={false} />

The checkbox renders its own label from field.label, so it needs no wrapper. It compares the value with field.trueValue and field.falseValue, so pass a serialized field (see Standalone Components).