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. When the surrounding field is required, the group automatically receives aria-required, and setting error exposes aria-invalid on the group container.
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.
is-connected?: boolean
Joins [Checkbox tiles](./tile) into a single block with shared borders and rounded outer corners. Not meant to be mixed with regular checkboxes.
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.
<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>
<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>
</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>
<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>
</template>
<script
setup
lang="ts">
import { FluxFormCheckbox, FluxFormCheckboxGroup } from '@flux-ui/components';
import { ref } from 'vue';
const channels = ref(['email']);
</script>Tile
Card-style options through Checkbox tile, with an icon and description.
<template>
<FluxPane style="max-width: 420px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="Add-ons">
<FluxFormCheckboxGroup v-model="addons">
<FluxFormCheckboxTile
value="seats"
icon="user-plus"
label="Extra seats"
sub-label="Invite more teammates to your workspace."/>
<FluxFormCheckboxTile
value="support"
icon="bolt"
label="Priority support"
sub-label="Get faster responses from our team."/>
<FluxFormCheckboxTile
value="analytics"
icon="gauge-high"
label="Advanced analytics"
sub-label="Unlock detailed usage reports."/>
</FluxFormCheckboxGroup>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormCheckboxGroup, FluxFormCheckboxTile, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const addons = ref(['support']);
</script>Mixed
Combine tiles with a regular checkbox for a less prominent option.
<template>
<FluxPane style="max-width: 420px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="Add-ons">
<FluxFormCheckboxGroup v-model="addons">
<FluxFormCheckboxTile
value="support"
icon="bolt"
label="Priority support"
sub-label="Get faster responses from our team."/>
<FluxFormCheckboxTile
value="analytics"
icon="gauge-high"
label="Advanced analytics"
sub-label="Unlock detailed usage reports."/>
<FluxFormCheckbox
value="newsletter"
label="Product newsletter"/>
</FluxFormCheckboxGroup>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormCheckbox, FluxFormCheckboxGroup, FluxFormCheckboxTile, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const addons = ref(['support']);
</script>Connected
Join the tiles into a single block with is-connected.
<template>
<FluxPane style="max-width: 420px">
<FluxForm>
<FluxPaneBody>
<FluxFormField
as="group"
label="Add-ons">
<FluxFormCheckboxGroup
v-model="addons"
is-connected>
<FluxFormCheckboxTile
value="seats"
icon="user-plus"
label="Extra seats"
sub-label="Invite more teammates to your workspace."/>
<FluxFormCheckboxTile
value="support"
icon="bolt"
label="Priority support"
sub-label="Get faster responses from our team."/>
<FluxFormCheckboxTile
value="analytics"
icon="gauge-high"
label="Advanced analytics"
sub-label="Unlock detailed usage reports."/>
</FluxFormCheckboxGroup>
</FluxFormField>
</FluxPaneBody>
</FluxForm>
</FluxPane>
</template>
<script
setup
lang="ts">
import { FluxForm, FluxFormCheckboxGroup, FluxFormCheckboxTile, FluxFormField, FluxPane, FluxPaneBody } from '@flux-ui/components';
import { ref } from 'vue';
const addons = ref(['support']);
</script>