Disabled Edit

Disabled is a component which disables descendant tabbable elements and prevents pointer interaction.

Usage #Usage

Assuming you have a form component, you can disable all form inputs by wrapping the form with <Disabled>.

import { Button, Disabled, TextControl } from '@wordpress/components';
import { useState } from '@wordpress/element';

const MyDisabled = () => {
    const [ isDisabled, setIsDisabled ] = useState( true );

    let input = <TextControl label="Input" onChange={ () => {} } />;
    if ( isDisabled ) {
        input = <Disabled>{ input }</Disabled>;
    }

    const toggleDisabled = () => {
        setIsDisabled( ( state ) => ! state );
    };

    return (
        <div>
            { input }
            <Button variant="primary" onClick={ toggleDisabled }>
                Toggle Disabled
            </Button>
        </div>
    );
};

A component can detect if it has been wrapped in a <Disabled> by accessing its context using Disabled.Consumer.

function CustomButton() {
    return (
        <Disabled.Consumer>
            { ( isDisabled ) => (
                <button
                    { ...this.props }
                    style={ { opacity: isDisabled ? 0.5 : 1 } }
                />
            ) }
        </Disabled.Consumer>
    );
}

Props #Props

The component accepts the following props:

isDisabled #isDisabled

Whether to disable all the descendant fields. Defaults to true.

• Type: Boolean
• Required: No
• Default: true