Disabled

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

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

The component accepts the following props:

isDisabled

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

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