Checkbox tile

A checkbox tile is a card-style Checkbox for prominent, multi-select choices. Each option carries an icon, a label and a short description. Place the tiles inside a Checkbox group; the group binds the selected values to an array.

Extra seatsInvite more teammates to your workspace.Priority supportGet faster responses from our team.Advanced analyticsUnlock detailed usage reports.

TIP

Tiles fill the group's width when stacked. Add is-inline to the Checkbox group to lay them out in equal columns, best for two or three options. You can mix tiles and regular Checkboxes in the same group.

Required icons

check

Props

value: string | number | boolean
The value this tile contributes to the surrounding [Checkbox group](./group).

label?: string
The label of the tile.

sub-label?: string
A secondary line of text shown below the label.

icon?: FluxIconName
An icon shown at the start of the tile.

disabled?: boolean
If the tile is disabled.

Slots

default
The label content of the tile. Falls back to the label prop.

Examples

Stacked

Card-style checkboxes stacked at full width.

Preview

Add-ons

Extra seatsInvite more teammates to your workspace.Priority supportGet faster responses from our team.Advanced analyticsUnlock detailed usage reports.

Code

<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>

Inline

Tiles laid out in equal columns with is-inline.

Preview

Notifications

Email digestA weekly summary in your inbox.Calendar syncAdd events to your calendar.

Code

<template>
    <FluxPane style="max-width: 519px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    as="group"
                    label="Notifications">
                    <FluxFormCheckboxGroup
                        v-model="channels"
                        is-inline>
                        <FluxFormCheckboxTile
                            value="digest"
                            icon="bell"
                            label="Email digest"
                            sub-label="A weekly summary in your inbox."/>

                        <FluxFormCheckboxTile
                            value="calendar"
                            icon="calendar-check"
                            label="Calendar sync"
                            sub-label="Add events to your calendar."/>
                    </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 channels = ref(['digest']);
</script>

Without description

Compact tiles with just an icon and label, no sub-label.

Preview

What to back up

DatabasesFilesMedia

Code

<template>
    <FluxPane style="max-width: 420px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    as="group"
                    label="What to back up">
                    <FluxFormCheckboxGroup v-model="targets">
                        <FluxFormCheckboxTile
                            value="databases"
                            icon="database"
                            label="Databases"/>

                        <FluxFormCheckboxTile
                            value="files"
                            icon="folder"
                            label="Files"/>

                        <FluxFormCheckboxTile
                            value="media"
                            icon="image"
                            label="Media"/>
                    </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 targets = ref(['databases', 'files']);
</script>

Account security

A real-world group with a description per option.

Preview

Account security

Two-factor authenticationRequire a verification code when signing in.Login alertsEmail me about sign-ins from new devices.Trusted devicesSkip extra checks on devices you mark as trusted.

Code

<template>
    <FluxPane style="max-width: 441px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    as="group"
                    label="Account security">
                    <FluxFormCheckboxGroup v-model="settings">
                        <FluxFormCheckboxTile
                            value="two-factor"
                            icon="lock"
                            label="Two-factor authentication"
                            sub-label="Require a verification code when signing in."/>

                        <FluxFormCheckboxTile
                            value="alerts"
                            icon="bell"
                            label="Login alerts"
                            sub-label="Email me about sign-ins from new devices."/>

                        <FluxFormCheckboxTile
                            value="trusted"
                            icon="laptop"
                            label="Trusted devices"
                            sub-label="Skip extra checks on devices you mark as trusted."/>
                    </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 settings = ref(['two-factor']);
</script>

Used components

• Checkbox group
• Icon