Skip to content

CheckBoxGroup

The CheckboxGroup component is used to create a group of CheckboxInput components that can be rendered as a logical unit either horizontally or vertically.

Examples

html
<CheckboxGroup label="Colors" name="colors" class="mt-4">
    <CheckboxInput label="None" name="colors" value="red" />
    <CheckboxInput label="Goalkeeper" name="colors" value="blue" />
    <CheckboxInput label="Defender" name="colors" value="green"/>
    <CheckboxInput label="Midfielder" name="colors" value="orange" />
    <CheckboxInput label="Forward" name="colors" value="yellow" />
</CheckboxGroup>

An example can be seen in /frontend/views/ComponentExamples.vue

Component Props

PropDescriptionOptions
namethe name of the checkbox that holds the checked value(s)
labelthe text label of the checkbox group
directionthe direction to render the checkbox grouprow, col

Component Events

EventDescriptionArgs
--

CSS Classes

ClassDescription
.input-errorthe class applied when there is a validation error