Disabled Edit

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

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

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

Note: this component may not behave as expected in browsers that don’t support the inert HTML attribute. We recommend adding the official WICG polyfill when using this component in your project.

The component accepts the following props:

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

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