Checkbox

Basic usage

Watermelon Apple Banana

The default value needs to pass an array

To build an array of options in PHP file, each array must have value and text, which represent the value of options and the displayed text, respectively.

Route::get('demo', function() {
    return view('demo-view', [
        'checkbox1_value' => [ // The default value is an array.
            'apple',
            'banana',
        ],
        'checkbox1_option' => [
            [
                'value' => 'watermelon',
                'text' => 'Watermelon'
            ],
            [
                'value' => 'apple',
                'text'  => 'Apple',
            ],
            [
                'value' => 'banana',
                'text'  => 'Banana'
            ]
        ],
    ]);
});

In the demo-view view file, set $checkbox1_option and $checkbox1_value is passed to the input-checkbox component.

<x-input-checkbox name="checkbox1" :options="$checkbox1_option" :value="$checkbox1_value"></x-input-checkbox>

显示代码

TIP

After submitting the form, the value of the checkbox is a string in the format of 11,22. Please use explode or other methods to convert it into an array.

Disable some options

Watermelon Apple Banana

The default value needs to pass an array

To build an array of options in PHP file, each array must have value and text, which represent the value of options and the displayed text, respectively.

Route::get('demo', function() {
    return view('demo-view', [
        'checkbox1_value' => [ // The default value is an array.
            'apple',
        ],
        'checkbox1_option' => [
            [
                'value' => 'watermelon',
                'text' => 'Watermelon',
            ],
            [
                'value' => 'apple',
                'text'  => 'Apple',
            ],
            [
                'value' => 'banana',
                'text'  => 'Banana',
            ]
        ],
    ]);
});

In the demo-view view file, set $checkbox1_option and $checkbox1_value is passed to the input-checkbox component.

<x-input-checkbox name="checkbox1" :options="$checkbox1_option" :value="$checkbox1_value"></x-input-checkbox>

显示代码

Button Style

Watermelon Apple Banana

The default value needs to pass an array

To build an array of options in PHP file, each array must have value and text, which represent the value of options and the displayed text, respectively.

Route::get('demo', function() {
    return view('demo-view', [
        'checkbox1_value' => [ // The default value is an array.
            'apple',
            'banana',
        ],
        'checkbox1_option' => [
            [
                'value' => 'watermelon',
                'text' => 'Watermelon'
            ],
            [
                'value' => 'apple',
                'text'  => 'Apple',
            ],
            [
                'value' => 'banana',
                'text'  => 'Banana'
            ]
        ],
    ]);
});

In the demo-view view file, set $checkbox1_option and $checkbox1_value is passed to the input-checkbox component.

<x-input-checkbox-button name="checkbox1" :options="$checkbox1_option" :value="$checkbox1_value"></x-input-checkbox-button>

显示代码

Option Array Rule

We have agreed on the option data used in the checkbox. Each option needs to have the following fields:

Field	Required	Type	Description
value	Required	int or string	The value of the option, which is finally passed to the form
text	Required	string	Option is used to display the page
prop	No Required	string	It is used to control certain features of a single option, eg: disabled, see API docs look more.