Checkbox Group

The checkbox group allows you to quickly group related checkboxes or radio buttons together in your forms. This is not a replacement for the form-group component, and should be used inside the form-group component in your forms.

The most basic usage is like this:

    <x-checkbox />
    <x-checkbox />

This will stack the checkboxes on top of each other.

By default, the checkbox-group is designed to stack your checkboxes and radio inputs, but you can display them inline with each other, by setting the stacked attribute to false. This will display the checkboxes in rows of 3 columns.

<x-checkbox-group :stacked="false">
    <x-checkbox />
    <x-checkbox />

By default, the checkbox-group renders checkboxes in rows with 3 columns when it is rendered inline. To render a different amount of columns, you can specify the grid-cols attribute:

<x-checkbox-group :stacked="false" grid-cols="5"> ... </x-checkbox-group>

For convenience, you can size all the radio or checkbox elements the same by using the inputSize attribute. If no size is provided, it will use the config value for radios and checkboxes.

<x-checkbox-group input-size="lg"> ... </x-checkbox-group>

For more information on the sizing, checkout the Sizing documentation for checkboxes.

prop description
stacked A boolean value indicating if the elements should be stacked, or placed in grid columns. Defaults to true
gridCols The number of grid columns to use for the elements. Requires stacked to be true. Defaults to 3
inputSize The size to make all child inputs. Defaults to the config size for choice.

The following configuration keys and values can be adjusted for common default behavior you may want for the checkbox-group element.

'defaults' => [
    'choice' => [
        // Supported: 'sm', 'md', 'lg' (defaults to 'sm' if null)
        'size' => null,
Caught a mistake? Suggest an edit on GitHub