Flux

Toggle ​

The toggle switches between two states, on and off. Use it in settings and option panels to enable or disable a feature.

Accessibility

The toggle is exposed as a native role="switch" checkbox. State and validation attributes (aria-checked, aria-disabled, aria-readonly, aria-invalid) sit on that control, and when wrapped in a required Form field it also receives aria-required.

Props

model-value: boolean
The value of the toggle.

icon-off?: FluxIconName
The icon to use when the toggle is off.

icon-on?: FluxIconName
The icon to use when the toggle is on.

disabled?: boolean
Whether the toggle is disabled.

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

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

Emits

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

Examples ​

Basic

A basic toggle.

<template>
    <FluxToggle
        v-model="value"/>
</template>

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

    const value = ref(false);
</script>

Icons

A toggle with icons for both the on and off state.

<template>
    <FluxToggle
        v-model="value"
        icon-off="xmark"
        icon-on="check"/>
</template>

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

    const value = ref(false);
</script>

Form

A toggle used in a form.

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormField label="Do you agree with the terms of conditions?">
                <FluxToggle
                    v-model="value"
                    icon-off="xmark"
                    icon-on="check"/>
            </FluxFormField>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const value = ref(false);
</script>

Disabled

A disabled toggle in both the off and on state.

<template>
    <FluxFlex :gap="18">
        <FluxToggle
            :model-value="false"
            disabled/>

        <FluxToggle
            :model-value="true"
            disabled/>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxToggle } from '@flux-ui/components';
</script>

Invalid

A toggle with an error message.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    label="Do you agree with the terms and conditions?"
                    error="You must enable this to continue.">
                    <FluxToggle :model-value="false"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

Read-only

A read-only toggle that cannot be changed.

<template>
    <FluxToggle
        :model-value="true"
        is-readonly/>
</template>

<script
    setup
    lang="ts">
    import { FluxToggle } from '@flux-ui/components';
</script>

Used components ​