Disabled

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

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.

@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert

View on Storybook

View source on GitHub

Import

import { Disabled } from '@wordpress/components';

Props

Examples

Default

const Default = () => {
    return (
        <Disabled isDisabled>
            <Form />
        </Disabled>
    );
};

Content Editable

const ContentEditable = () => {
    return (
        <Disabled isDisabled>
            <div contentEditable tabIndex={ 0 } suppressContentEditableWarning>contentEditable
                            </div>
        </Disabled>
    );
};