Flux

Checkbox group ​

A checkbox group binds a set of checkboxes to a single array through v-model. Each checkbox carries a value; checking it adds that value to the array, unchecking removes it.

TIP

Wrap the group in a Form field with as="group" to attach an accessible group label. Used standalone, pass an aria-label instead.

Props

model-value?: (string | number | boolean)[]
The array of selected values.

aria-label?: string
The accessible label of the group. Not needed when the group is wrapped in a Form field with as="group".

is-inline?: boolean
Lays the checkboxes out horizontally instead of stacked.

disabled?: boolean
If the entire group is disabled.

error?: string
The error message, marking every checkbox as invalid.

is-readonly?: boolean
If the group is read-only.

Emits

update:model-value: [(string | number | boolean)[]]
Triggered when the selection changes.

Slots

default
The checkboxes of the group, each rendered as a [Checkbox](./) with a value.

Examples ​

Basic

A checkbox group inside a form field.

Notifications

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    as="group"
                    label="Notifications">
                    <FluxFormCheckboxGroup v-model="channels">
                        <FluxFormCheckbox
                            value="email"
                            label="Email"/>

                        <FluxFormCheckbox
                            value="sms"
                            label="SMS"/>

                        <FluxFormCheckbox
                            value="push"
                            label="Push"/>
                    </FluxFormCheckboxGroup>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormCheckbox, FluxFormCheckboxGroup, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const channels = ref(['email', 'push']);
</script>

Inline

A checkbox group laid out horizontally.

<template>
    <Preview>
        <FluxFormCheckboxGroup
            v-model="days"
            is-inline
            aria-label="Active days">
            <FluxFormCheckbox
                value="mon"
                label="Mon"/>

            <FluxFormCheckbox
                value="tue"
                label="Tue"/>

            <FluxFormCheckbox
                value="wed"
                label="Wed"/>

            <FluxFormCheckbox
                value="thu"
                label="Thu"/>

            <FluxFormCheckbox
                value="fri"
                label="Fri"/>
        </FluxFormCheckboxGroup>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxFormCheckbox, FluxFormCheckboxGroup } from '@flux-ui/components';
    import { ref } from 'vue';

    const days = ref(['mon', 'wed', 'fri']);
</script>

Disabled item

A checkbox group with a single disabled option.

<template>
    <Preview>
        <FluxFormCheckboxGroup
            v-model="channels"
            aria-label="Notification channels">
            <FluxFormCheckbox
                value="email"
                label="Email"/>

            <FluxFormCheckbox
                value="sms"
                label="SMS"/>

            <FluxFormCheckbox
                value="push"
                label="Push"
                disabled/>
        </FluxFormCheckboxGroup>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxFormCheckbox, FluxFormCheckboxGroup } from '@flux-ui/components';
    import { ref } from 'vue';

    const channels = ref(['email']);
</script>

Used components ​