Checkbox

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

NewsletterI want to receive weekly updates.

Required icons

check

minus

Props

model-value: boolean | null
The value of the checkbox.

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

Emits

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

Examples

Basic

A simple and basic checkbox.

Preview

NewsletterI want to receive weekly updates.

Code

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

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

Indeterminate

A checkbox with an indeterminate state.

Preview

NewsletterI want to receive weekly updates.

Code

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

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