Disabled

The disabled component provides a shared disabled state to all child components within it. Instead of applying visual or interactive changes itself, it exposes the disabled value through Vue's injection system. Any nested Flux component can read this state and adjust its own appearance and behavior accordingly. This allows entire sections of the UI to be disabled at once without needing to set the disabled prop individually on each component.

First name

Last name

Props

disabled?: boolean
If the child components should be disabled.
Default: true

Slots

default
The elements that should be disabled.

Examples

Basic

An entire section disabled through a single wrapper.

Preview

Email

Code

<template>
    <FluxDisabled disabled>
        <FluxFlex
            direction="vertical"
            :gap="9">
            <FluxFormField label="Email">
                <FluxFormInput placeholder="you@example.com"/>
            </FluxFormField>

            <FluxPrimaryButton label="Subscribe"/>
        </FluxFlex>
    </FluxDisabled>
</template>

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

Toggle a section

Bind the shared state to your own toggle.

Preview

First name

Last name

Code

<template>
    <FluxFlex
        direction="vertical"
        :gap="9">
        <FluxToggle v-model="isDisabled">
            Disable everything below
        </FluxToggle>

        <FluxDisabled :disabled="isDisabled">
            <FluxFormField label="First name">
                <FluxFormInput placeholder="E.g. John"/>
            </FluxFormField>

            <FluxFormField label="Last name">
                <FluxFormInput placeholder="E.g. Doe"/>
            </FluxFormField>

            <FluxFlex :gap="9">
                <FluxSecondaryButton label="Cancel"/>
                <FluxPrimaryButton label="Save"/>
            </FluxFlex>
        </FluxDisabled>
    </FluxFlex>
</template>

<script
    setup
    lang="ts">
    import { FluxDisabled, FluxFlex, FluxFormField, FluxFormInput, FluxPrimaryButton, FluxSecondaryButton, FluxToggle } from '@flux-ui/components';
    import { ref } from 'vue';

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