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