Toggle

A toggle component is a type of user interface element that allows the user to switch between two states, such as "on" and "off." It is often represented as a switch or button that can be flipped to change the state. Toggles are commonly used in settings menus or options pages, allowing users to enable or disable specific features or settings. They provide a simple and intuitive way for users to interact with the interface and control the behavior of the application.

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.

is-switch?: boolean
Applies a switch style to the toggle. This means that the toggle won't change color when it's activated.

Emits

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

Examples

Basic

A basic toggle.

Preview

Code

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

Preview

Code

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

Switch

A toggle that serves as a switch.

Preview

Code

<template>
    <FluxToggle
        v-model="value"
        is-switch
        icon-on="sun"
        icon-off="moon"/>
</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.

Preview

Do you agree with the terms of conditions?

Code

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

Used components

• Icon