Disabled State

Learn how to use and style disabled checkboxes in your application.

Example

Usage

Basic Disabled State

<Checkbox disabled>
  Disabled Checkbox
</Checkbox>

Disabled with Initial State

<Checkbox 
  disabled 
  defaultChecked
>
  Disabled & Checked
</Checkbox>

Disabled in Controlled Mode

function ControlledDisabled() {
  const [checked, setChecked] = useState(true);
 
  return (
    <Checkbox 
      disabled
      checked={checked}
      onChange={setChecked}
    >
      Controlled Disabled
    </Checkbox>
  );
}

Styling

The disabled state comes with default styling:

1. Reduced opacity
2. Not clickable (cursor: not-allowed)
3. Grayed out appearance
4. Disabled state is preserved in the tab order

Best Practices

1. Use disabled state when:
   • The action is not currently available
   • User doesn't have permission
   • Operation is pending or loading
2. Provide clear indication why the checkbox is disabled:
   • Use helper text to explain the reason
   • Consider tooltips for additional context
3. Maintain accessibility:
   • Keep disabled elements in the tab order
   • Provide appropriate ARIA attributes
4. Consider alternatives:
   • Hide the option if it's not relevant
   • Use read-only state if appropriate