Flux

Appearance

useDisabled ​

This composable merges a component's local disabled state with any inherited disabled state from a parent Disabled component. Returns true if either the component itself or any parent in the tree is disabled.

Usage ​

ts
import { useDisabled } from '@flux-ui/components';
import { toRef } from 'vue';

const { disabled: componentDisabled } = defineProps<{
    disabled?: boolean;
}>();

const disabled = useDisabled(toRef(() => componentDisabled));

Type declarations ​

ts
import type { ComputedRef, Ref } from 'vue';

declare function useDisabled(
    componentDisabled: Ref<boolean>
): ComputedRef<boolean>;

Example ​

Toggle a parent Disabled component to disable an entire group of inputs and actions at once. Each Flux component reads the inherited disabled state through useDisabled internally, so you don't need to forward the prop manually.

Inherited disabled

A toggle that disables a group of inputs and buttons via a wrapping `FluxDisabled`.

<template>
    <Preview>
        <FluxStack :gap="9">
            <FluxToggle v-model="parentDisabled">
                Disable everything below
            </FluxToggle>

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

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

                <FluxStack
                    direction="horizontal"
                    :gap="9">
                    <FluxSecondaryButton label="Cancel"/>
                    <FluxPrimaryButton label="Save"/>
                </FluxStack>
            </FluxDisabled>
        </FluxStack>
    </Preview>
</template>

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

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

Used by ​