Disabled
Edit
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.Context
.
function CustomButton( props ) { const isDisabled = useContext( Disabled.Context ); return ( <button { ...props } style={ { opacity: isDisabled ? 0.5 : 1 } } /> ); }
Props
The component accepts the following props:
isDisabled
Whether to disable all the descendant fields. Defaults to true
.
- Type:
Boolean
- Required: No
- Default:
true