Radio

Basic usage

Watermelon Apple Banana

Default selected is Apple.

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', [
        'radio1_option' => [
            [
                'value' => 11,
                'text' => 'Watermelon'
            ],
            [
                'value' => 22,
                'text'  => 'Apple'
            ],
            [
                'value' => 23,
                'text'  => 'Banana',
            ]
        ],
    ]);
});

In the demo-view view file, set $radio1_option is passed to the input-radio component.

<x-input-radio name="radio1" :options="$radio1_option" :value="22" ></x-input-radio>

显示代码

Disabled some options

Watermelon Apple Banana

Disabled banana.

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', [
        'radio1_option' => [
            [
                'value' => 11,
                'text' => 'Watermelon'
            ],
            [
                'value' => 22,
                'text'  => 'Apple'
            ],
            [
                'value' => 23,
                'text'  => 'Banana',
                'prop'  => 'disabled', // This option is disabled.
            ]
        ],
    ]);
});

In the demo-view view file, set $radio1_option is passed to the input-radio component.

<x-input-radio name="radio1" :options="$radio1_option" :value="22" ></x-input-radio>

显示代码

Button Style

Watermelon Apple Banana

Default Selected is Apple.

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', [
        'radio3_option' => [
            [
                'value' => 11,
                'text' => 'Watermelon'
            ],
            [
                'value' => 22,
                'text'  => 'Apple'
            ],
            [
                'value' => 23,
                'text'  => 'Banana',
                // 'prop'  => 'disabled', // This option is disabled.
            ]
        ],
    ]);
});

In the demo-view view file, set $radio3_option is passed to the input-radio-button component.

<x-input-radio-button name="radio1" :options="$radio3_option" :value="22" ></x-input-radio-button>

显示代码

Button Size

Watermelon Apple Banana

Watermelon Apple Banana

Watermelon Apple Banana

Watermelon Apple Banana

Default Selected is Apple.

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.

 // ... This is PHP code.

In the demo-view view file, set $radio3_option is passed to the input-radio-button component.

<x-input-radio-button name="radio1" :options="$radio3_option" :value="22" ></x-input-radio-button>
<x-input-radio-button name="radio1" :options="$radio3_option" :value="22" size="medium"></x-input-radio-button>
<x-input-radio-button name="radio1" :options="$radio3_option" :value="22" size="small" ></x-input-radio-button>
<x-input-radio-button name="radio1" :options="$radio3_option" :value="22" size="mini" ></x-input-radio-button>

显示代码

Option Array Rule

We have agreed on the option data used in the radio. 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.