Flux

Appearance

Checkbox ​

A clean and functional input element that supports labels and multiple states, designed to enhance usability and accessibility in forms and interfaces.

TIP

To bind a set of checkboxes to a single array, use a Checkbox group. When you place more than one control in a single Form field, set as="group" on the field so the label is rendered as a group label (role="group" + aria-labelledby) instead of a single <label for>.

Required icons

check
minus

Props

model-value: boolean | null
The value of the checkbox. Used when the checkbox is standalone.

label?: string
The label that is shown next to the checkbox.

sub-label?: string
A secondary line of text shown below the label. The checkbox stays aligned with the label.

value?: string | number | boolean
The value this checkbox contributes to a surrounding [Checkbox group](./group). Only used inside a FluxFormCheckboxGroup.

disabled?: boolean
If the checkbox is disabled.

error?: string | null
Error message describing why the checkbox is invalid. Sets aria-invalid and a red border.

is-readonly?: boolean
If the checkbox is readonly. Blocks toggling via mouse or keyboard.

Emits

update:model-value: [boolean]
Triggered when the value is changed.

Examples ​

Basic

A simple and basic checkbox.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Newsletter">
                    <FluxFormCheckbox
                        :model-value="true"
                        label="I want to receive weekly updates."/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

Indeterminate

A checkbox with an indeterminate state.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Newsletter">
                    <FluxFormCheckbox
                        :model-value="null"
                        label="I want to receive weekly updates."/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

Sub-label

A checkbox with a secondary line of text below the label.

Notifications

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    as="group"
                    label="Notifications">
                    <FluxFormCheckboxGroup v-model="channels">
                        <FluxFormCheckbox
                            value="email"
                            label="Email notifications"
                            sub-label="Receive a weekly digest of activity in your account."/>

                        <FluxFormCheckbox
                            value="usage"
                            label="Share usage data"
                            sub-label="Help us improve the product by sharing anonymous usage statistics."/>
                    </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']);
</script>

Used components ​